Web Components Counter

This counter uses Declarative Shadow DOM for SSR.

CSS is defined in app/client/wc_counter.mbt and shared between SSR and hydration.

Inspect the element to see <template shadowrootmode="open"> with <style>.

How it works

The WcIsland generates a custom element with Declarative Shadow DOM:

<wc-counter data-wc-url="..." data-state="...">\n  <template shadowrootmode="open">\n    <style>:host { ... }</style>\n    <div class="counter">...</div>\n  </template>\n</wc-counter>