Lately, CSS supports styling of parts of HTML Web Components:
Aurelia supports this as well, of course:
test-component.ts
import { useShadowDOM } from 'aurelia-framework';
@useShadowDOM
export class TestComponent {
}
test-component.html
<template>
<require from="./test-component.css" as="scoped"></require>
<div class="test-component-view">
<div class="foo" part="foo">This is the <i>foo</i> section.</div>
<div class="bar" part="bar">This is the <i>bar</i> section.</div>
</div>
</template>
test-component.css
.test-component-view {
border: 1px solid red;
}
.test-component-view > .foo {
margin: 5px;
padding: 5px;
border: 1px solid green;
background-color: lightgreen;
}
.test-component-view > .bar {
margin: 5px;
padding: 5px;
border: 1px solid blue;
background-color: lightblue;
}
app.html
<template>
<require from="./test-component"></require>
<require from="./app.css"></require>
<test-component id="component1"></test-component>
<test-component id="component2"></test-component>
</template>
app.css
/* Override the styling of the 'bar' part of the <test-component> element with id #component2 */
#component2::part(bar) {
background-color: lightgray;
border: 1px solid black;
}
I assume that we (the Aurelia developer community) should take special care when this is combined with Aurelia’s replaceable parts.
Are there perhaps any known (and not obvious) pitfalls when using and combining these technologies?