Declarative Shadow DOM

Category: DOM
Type: New or changed feature
Status: Enabled by default (Chrome 90)
Intent stage: Shipped

Breaking change: No
Enterprise impact: None
Chromium flag: --enable-blink-features=DeclarativeShadowDOM
Spec maturity: Incubation
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/shadow-dom/declarative

Summary

A declarative API to allow the creation of #shadowroot's using only HTML and no Javascript. Blog post: https://web.dev/declarative-shadow-dom/

Motivation

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.

Standards & signals

Specification: https://github.com/whatwg/html/pull/5465
Firefox: Positive — Some concern that the feature "doesn't carry its weight", but Firefox considers this API non-harmful. Many offline discussions were had, with many issues discussed. A summary of the current state can be found here: https://github.com/mozilla/standards-positions/issues/335#issuecomment-781697858
Safari: No signal — WebKit has been pinged several times, with nearly no response. rniwa@ did tweet some mildly-supportive (but obviously not "official") comments: https://twitter.com/rniwa_dev/status/1309582835234172928 https://twitter.com/rniwa_dev/status/1352322006448947203
Web developers: Positive — See many comments from developers on the prior thread resolving *not* to move forward with declarative Shadow DOM. Most are positive and want a solution to this problem. Start after this comment: https://github.com/whatwg/dom/issues/510#issuecomment-370980398
Tracking bug: https://crbug.com/1042130

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=shadow-dom%2Fdeclarative
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Declarative%20Shadow%20DOM
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Declarative%20Shadow%20DOM
Baseline status: https://webstatus.dev/?q=Declarative%20Shadow%20DOM

Docs: https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md

Samples: https://jsbin.com/huquloz

Explainers: https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md https://web.dev/declarative-shadow-dom/

View on chromestatus.com