openElement treats Declarative Shadow DOM as the server-rendered boundary for Web Components, then upgrades only the behavior that must run in the browser.
Declarative Shadow DOM uses a template with shadowrootmode so HTML can carry shadow-root content before client JavaScript loads.
<my-card>
<template shadowrootmode="open">
<style>:host { display: block; }</style>
<p>Visible before client JavaScript.</p>
</template>
</my-card>A client runtime often reconstructs the component tree before the page is fully interactive.
The browser parses shadow roots from HTML. Custom Elements then upgrade existing hosts and attach only the needed behavior.