Declarative Shadow DOM

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

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

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