10LOC

#shadow-dom

Chrome APIsadvanced

Declarative Shadow DOM for server-rendered web components

<user-card>
  <template shadowrootmode="open">
    <style>
      :host { display: block; border: 1px solid #ddd; border-radius: 8px; padding: 1rem; }
      .name { font-weight: 600; margin: 0; }

A <template shadowrootmode> is parsed straight into a real shadow root by the HTML parser — a web component's shadow tree, fully rendered before any JS runs.