Declarative Shadow DOM

A declarative API to allow the creation of #shadowroot's using only HTML and no Javascript. Example: <host-element> <template shadowroot="open"> <slot></slot> </template> <h2>Light content</h2> </host-element> The above HTML would generate the following DOM tree: <host-element> #shadow-root (open) <slot> ↳ <h2> reveal </slot> <h2>Light content</h2> </host-element>

This API allows Web Components that use Shadow DOM to also make use of Server-Side Rendering (SSR), to get rendered content onscreen quickly without requiring Javascript for shadow root attachment.

Demo

• https://jsbin.com/huquloz

Documentation

• There is an active discussion in the WhatWG at: https://github.com/whatwg/dom/issues/831

Status in Chromium

Blink components: Blink>DOM>ShadowDOM

In development (tracking bug)

Consensus & Standardization

• Firefox: No public signals
• Edge: No public signals
• Safari: No public signals
• Web Developers: Positive

Owner

• masonfreed@chromium.org

Last updated on 2020-02-13