shadowrootadoptedstylesheets on HTMLTemplateElement

[KurtCattiSchmidt]

Specification

PR here: whatwg/html#12339

Description

shadowrootadoptedstylesheets allows for setting adoptedStyleSheets on declarative shadow DOM. It accepts a space-separated list of specifiers that are fetched and added to the generated shadow root's adoptedStyleSheets array in specified order.

Documentation

https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md

Browser support

This is currently only supported in Chromium browsers behind Experimental Web Platform Features. We are planning on shipping it in Chromium 152. More details are under https://chromestatus.com/feature/4790543041298432.

[KurtCattiSchmidt]

This can probably belong under declarative-shadow-dom

[KurtCattiSchmidt]

Upon further discussion, it was recommended that I create a new feature for this attribute instead of lumping it in with declarative-shadow-dom

[captainbrosset]

Related features:

• CSS import attributes (aka CSS modules): https://web-platform-dx.github.io/web-features-explorer/features/css-modules/
• Constructed stylesheets: https://web-platform-dx.github.io/web-features-explorer/features/constructed-stylesheets/
• Declarative shadow DOM: https://web-platform-dx.github.io/web-features-explorer/features/declarative-shadow-dom/

[captainbrosset]

Bringing some of the description from the chromestatus entry, as it's quite helpful in understanding the feature:

Today, developers have several non-ideal options for sharing styles between declarative shadow DOM hosts:

1. Use imperative CSS Modules, somewhat defeating the purpose of declarative shadow DOM, because it requires script and must happen after the declarative shadow DOM has been parsed.
2. Duplicating <style> tags, resulting in more work for parser and more work for the developer to update dynamically.
3. Use external CSS files in a <link> tag, resulting in a potential Flash of Unstyled Content (FOUC), as well as more work for the developer to update dynamically.

<template shadowrootadoptedstylesheets> allows declarative shadow DOM hosts to specify adopted stylesheets at parse time. The shadowrootadoptedstylesheets attribute supports a space-separated list of specifiers that each get fetched (exactly like a JavaScript import) and added to adoptedStyleSheets in specified order. Developers are encouraged to preload the stylesheets referenced via <link rel="modulepreload" as="style"> in the head to prevent late fetches.