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

Documentation

Status in Chromium

Blink>DOM>ShadowDOM


In development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No public signals
  • No public signals
  • No public signals
  • Positive

Owner

Last updated on 2020-02-13