What does the markup <template shadowrootmode="open"> do when the HTML parser encounters it, and which server-rendering problem does it solve for components that use shadow DOM?

## The gap it fills Before declarative shadow DOM, a shadow root could be created exactly one way: JavaScript calling `element.attachShadow()`. That made shadow DOM and server-side rendering mutually exclusive. A server could send `<user-card></user-card>`, but the element's shadow tree — its markup *and* its scoped `<style>` — existed only after the component script downloaded, parsed, ran `customElements.define`, and each element upgraded and populated its root. Until then the user saw nothing, or saw the unstyled light-DOM children, and the layout shifted when the component finally appeared. Declarative shadow DOM (DSD) closes that gap by giving the *parser* a way to attach a shadow root. ```html <user-card> <template shadowrootmode="open"> <style>:host { display: block; border: 1px solid; }</style> <slot name="name"></slot> </template> <span slot="name">Ada</span> </user-card> ``` ## What the parser actually does When the HTML parser encounters a `<template>` carrying `shadowrootmode` as a direct child of an element, it does not insert a template element into the DOM at all. It attaches a shadow root to the parent with the given mode, moves the template's parsed content into that shadow root, and drops the template. Inspect the result and there is no `<template>` — there is `#shadow-root (open)` with the content inside it. The consequences are immediate and script-free: the `<style>` inside the shadow root applies at parse time with normal shadow-scoping, `<slot>` elements assign the light-DOM children that follow, and `:host` rules match. The component looks right on first paint even if its JavaScript never loads at all. The companion attributes mirror the `attachShadow()` options: `shadowrootmode="open"` or `"closed"`, plus `shadowrootdelegatesfocus`, `shadowrootclonable` and `shadowrootserializable`. ## The parser-only restriction DSD is a parser feature, not a DOM feature, and this trips people up constantly. Setting the same string through `innerHTML` produces a plain, inert `<template>` element — no shadow root. That is deliberate: `innerHTML` is a common XSS sink, and silently letting attacker-controlled markup create shadow roots would let it hide content from sanitizers that walk the light DOM. When you genuinely need to parse DSD at runtime, the platform gives you explicitly-named opt-ins: `element.setHTMLUnsafe(html)` and `Document.parseHTMLUnsafe(html)`. The `Unsafe` in the name is the point — you are asserting the markup is trusted. For serialization in the other direction, `element.getHTML({ serializableShadowRoots: true })` will include shadow roots that were marked serializable. ## Where the two halves meet DSD is only the first half of a component's life. The server ships the shadow tree; the client-side class must later adopt it rather than rebuild it. That means a component intended for SSR should never assume `attachShadow` in its constructor is the only path — it should check whether a shadow root already exists — and should render its markup on the server and the client from the same template so the two agree. It is also worth being clear about what DSD is *not*. It is not hydration: it restores markup and styles, not event listeners or state. Buttons in a server-rendered shadow tree do nothing until the component's script runs. What you have bought is correct first paint, no layout shift, and a component that degrades to readable, styled content with JavaScript disabled — which is exactly the same bargain server rendering makes everywhere else. ## Availability Declarative shadow DOM with the `shadowrootmode` spelling is supported in Chrome 111+, Safari 16.4+ and Firefox 123+. An earlier Chrome experiment used the attribute name `shadowroot`, which was replaced; code or blog posts using that spelling are stale. Server-rendering frameworks that emit DSD generally emit `shadowrootmode`. ## The one-sentence answer `<template shadowrootmode="open">` is the parser's way of calling `attachShadow` on the enclosing element, which is what finally made shadow-DOM components server-renderable — styles and all — without waiting for their JavaScript.