Closed
Description
I'm submitting a feature request:
In Shadow DOM you can create style hooks using CSS custom properties. It is possible in polymer too with custom-css-mixins.
Angular should support style hooks / or style projections.
Here is the syntax:
@Component({
selector: 'ns-button',
template: `
<button>
<i class="icon fa fa-fw fa-star"></i>
<ng-content></ng-content>
</button>
`,
styles: [`
:host {
display: inline-block;
/* projects --ns-button styles, this is like <ng-content></ng-content>
on the template level */
@apply(--ns-button);
}
.icon {
height: auto;
max-width: 35px;
@apply(--ns-button-icon)
}
`]
})
class NsButton {
}
@Component({
selector: 'ns-app',
template: `<ns-button>Click me!</ns-button>`,
styles: [`
ns-button {
/* this is how you feed it with input, this is like ContentChild
on the template level */
--ns-button: {
background-color: green;
border-radius: 4px;
border: 1px solid gray;
};
--ns-button-icon: {
color: green;
};
}
`]
})
class NsApp {
}