Controls light DOM

<labeled-field> and <color-swatch-picker> render into the light DOM; their CSS is a CSS module adopted into document.adoptedStyleSheets. They never touch the other components: each edit is shared with <main-context>, which calls the on… callbacks the other components registered.

<star-rating> template · open shadow

Click or hover a star. Clicking the current value clears it.

Rate this mixin

<secret-note> template · closed shadow

The page can't reach inside, but the component can, through this.root.

From the outside

Attribute log

Each prop change reflects to an attribute, and this list records them as mutations.