Combining Aurelia replaceable parts with HTML Web Components part styling

Framework Knowledge
1

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?

1 Like
2

There could be some issues, as part attribute will be compiled away by ViewCompiler. Maybe we should address this. Maybe we can add a part name configuration for view compiler, so that it look for a different attribute like part-name instead of part.

1 Like