Web Component Best Practices (Declarative Shadow DOM)

This page is generated at build time and demonstrates parser-time declarative shadow DOM with reusable source partials. The templates are emitted directly into this HTML output so shadow roots are created by HTML parsing rather than runtime DOM assembly.

Constraint matrix (you can only pick two). Current state of the art: there is no native browser mechanism to import reusable HTML fragments across documents while preserving true parser-time DSD semantics.
Keep Implementation Tradeoff
DSD + no build duplicate markup in each HTML file not DRY (drift risk)
DRY + no build runtime JS composition/fetch not true parser-time DSD
DSD + DRY build step or server-side composition cannot stay no-build/no-server
<script type="module">   import WebComponent from './src/element.js'   WebComponent.register('no-side-effects') // Convenience API </script>

This component is registered with a static tag name and demonstrates how to create a component without side effects on import. It requires two explicit steps to import the class and then register the custom element, but it provides a more predictable loading flow and better separation of concerns.

<script type="module">   import WebComponent from './src/element.js'   WebComponent.register(WebComponent.tagName) // Default name </script>

This component uses explicit registration with the default tag name.

 <script type="module">   import WebComponent from './src/element.js'   WebComponent.register('dynamic-name') </script>

This component is registered with a custom tag name via explicit register('dynamic-name').

<script type="module">   import "https://unpkg.com/web-component-best-practices/dsd/defined.js?name=cdn-dynamic-name" </script>

This component demonstrates the DSD-specific side effect entrypoint with a CDN URL and dynamic name via query parameter.