This demonstrates SSRing web components using 2 features, templates and customElements. A template is used to represent the content that should be placed in the shadowRoot
. A custom element named shadow-root
is used to inject the template content into the parentNode
which is the shadow host.
This results in no flash of unstyled content. No CSS rewriting is necessary. The JavaScript minifys down to 205 bytes.
The downside is that it will not work with JavaScript disabled.