junte-encapsuler v0.0.48
Junte Encapsuler
Version
##Installation
Install Junte Encapsuler with
npm install junte-encapsuler --save
Once installed you need add some scripts to
package.json
for encapsulate your components
"encapsuler": "mkdir -p src/scripts && cp ./node_modules/junte-encapsuler/encapsulation.ts./src/scripts",
"encapsulation": "gulp build --gulpfile ./src/scripts/encapsulation.ts",
"encapsulation:watch": "gulp build --gulpfile ./src/scripts/encapsulation.ts --watch"
Use npm run encapsuler for copy gulpfile from
node_modules
toyour_project/scripts/encapsulation.ts
Use npm run encapsulation (:watch) for encapsulate your components templates and styles.
##Encapsulation
###host and child-of attributes:
In order for our encapsulation to work, you need to adds the host='selector' attribute using @HostBinding, this will provide an encapsulation of component styles.
To encapsulate the styles of elements inside a component, our encapsulator automatically adds the child-of='selector' attribute to them.
###child-host attribute:
To override the styles of the encapsulated component, use the child-host=#{'$child-selector'} attribute in the parent's scss file
##Examples
Bind host attribute to test.component.ts
file
@HostBinding('attr.host') host = 'app-test-host';
Add this host to any loaded scss style (variables.scss
for example)
$app-test-host: 'app-test-host';
Change templateUrl and remove styleUrls to test.encapsulated
templateUrl: './test.encapsulated.html'
Import encapsulated style to global loaded styles
@import "components/test/test.encapsulated";
test.component.html
before
<h1>Test component</h1>
<form>
<input type="text">
<button>Test button</button>
</form>
test.encapsulated.html
after:
<h1 child-of="app-test-host">Test component</h1>
<form child-of="app-test-host">
<input child-of="app-test-host" type="text"/>
<button child-of="app-test-host">Test button</button>
</form>
test.component.scss
before:
@import "variables";
:host {
display: block;
padding: 16px;
border: 1px solid $primary-color;
}
h1 {
color: $primary-color;
}
form {
background-color: $secondary-background;
padding: 8px;
input {
margin-right: 16px;
border-radius: $corner-normal;
padding: 8px 16px;
}
button {
background-color: $primary-color;
color: white;
border-radius: $corner-normal;
padding: 8px 16px;
}
}
test.encapsulated.scss
after:
@import "variables";
app-test[host=#{$app-test-host}] {
display: block;
padding: 16px;
border: 1px solid $primary-color;
}
h1[child-of=#{$app-test-host}] {
color: $primary-color;
}
form[child-of=#{$app-test-host}] {
background-color: $secondary-background;
padding: 8px;
input[child-of=#{$app-test-host}] {
margin-right: 16px;
border-radius: $corner-normal;
padding: 8px 16px;
}
button[child-of=#{$app-test-host}] {
background-color: $primary-color;
color: white;
border-radius: $corner-normal;
padding: 8px 16px;
}
}
###child-host example:
test-child.component.scss
before:
@import "variables";
:host {
display: block;
background-color: #4F4F4F;
padding: 16px;
margin: 8px 0;
color: white;
}
test-child.encapsulated.scss
after:
@import "variables";
app-test-child[host=#{$app-test-child-host}] {
display: block;
background-color: #4F4F4F;
padding: 16px;
margin: 8px 0;
color: white;
}
test-parent.component.scss
before:
@import "variables";
:host {
display: block;
background-color: #E9E9E9;
padding: 16px;
margin: 8px 0;
}
app-test-child[child-host=#{$app-test-child-host}] {
background-color: white;
color: #4F4F4F;
}
test-parent.encapsulated.scss
after:
@import "variables";
app-test-parent[host=#{$app-test-parent-host}] {
display: block;
background-color: #E9E9E9;
padding: 16px;
margin: 8px 0;
}
app-test-child[host=#{$app-test-child-host}][child-of=#{$app-test-parent-host}] {
background-color: white;
color: #4F4F4F;
}
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago