Skip to content

shadowrootadoptedstylesheets on <template> #12339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KurtCattiSchmidt wants to merge 8 commits into
base: main
Choose a base branch
from
+141 −3
Open

shadowrootadoptedstylesheets on <template> #12339

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a7ece98
Initial port, needs fetch
KurtCattiSchmidt Mar 31, 2026
b576c09
Adding fetch, still rough
KurtCattiSchmidt Apr 6, 2026
aeca132
Clarifying the two sheets
KurtCattiSchmidt Apr 6, 2026
8cdd137
Updating steps and fixing error
KurtCattiSchmidt Apr 7, 2026
7eff300
Ordered set of unique tokens
KurtCattiSchmidt Apr 7, 2026
ed9b8f7
Adding note about FOUC in example
KurtCattiSchmidt Apr 29, 2026
6764c68
Adding HTMLTemplateElement.shadowRootAdoptedStyleSheets, shadowrootse…
KurtCattiSchmidt May 6, 2026
3897188
Fixing specifier splitting by whitespace
KurtCattiSchmidt May 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 141 additions & 3 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4107,6 +4107,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/cssom/#create-a-constructed-cssstylesheet">create a constructed <code>CSSStyleSheet</code></dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom/#synchronously-replace-the-rules-of-a-cssstylesheet">synchronously replace the rules of a <code>CSSStyleSheet</code></dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom/#disable-a-css-style-sheet">disable a CSS style sheet</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom/#dom-cssstylesheet-replacesync">replaceSync</dfn></li>
<li>
<dfn data-x="CSS style sheet"
data-x-href="https://drafts.csswg.org/cssom/#css-style-sheet">CSS style sheets</dfn> and their
Expand All @@ -4132,6 +4133,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/cssom/#serialize-a-css-value">Serializing a CSS value</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#document-run-the-resize-steps">run the resize steps</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#document-run-the-scroll-steps">run the scroll steps</dfn></li>
<li>
<dfn data-x="concept-documentorshadowroot-extensions-mixin"
data-x-href="https://drafts.csswg.org/cssom/#extensions-to-the-document-or-shadow-root-interface">Extensions to the <code>DocumentOrShadowRoot</code> Interface Mixin</dfn>:
<ul class="brief">
<li><dfn data-x="adoptedstylesheets" data-x-href="https://drafts.csswg.org/cssom/#dom-documentorshadowroot-adoptedstylesheets">adoptedStyleSheets</dfn></li>
</ul>
</li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#evaluate-media-queries-and-report-changes">evaluate media queries and report changes</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#scroll-a-target-into-view">Scroll a target into view</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#scroll-to-the-beginning-of-the-document">Scroll to the beginning of the document</dfn></li>
Expand Down Expand Up @@ -68080,6 +68088,7 @@ not-slash = %x0000-002E / %x0030-10FFFF
<dd><code data-x="attr-template-shadowrootclonable">shadowrootclonable</code></dd>
<dd><code data-x="attr-template-shadowrootserializable">shadowrootserializable</code></dd>
<dd><code data-x="attr-template-shadowrootcustomelementregistry">shadowrootcustomelementregistry</code></dd>
<dd><code data-x="attr-template-shadowrootadoptedstylesheets">shadowrootadoptedstylesheets</code></dd>
<dt><span
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
<dd><a href="https://w3c.github.io/html-aria/#el-template">For authors</a>.</dd>
Expand All @@ -68092,6 +68101,7 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {

readonly attribute <span>DocumentFragment</span> <span data-x="dom-template-content">content</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-template-shadowrootmode">shadowRootMode</span>;
[<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLTemplateElement" data-x="dom-template-shadowrootadoptedstylesheets">shadowRootAdoptedStyleSheets</dfn>;
[<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLTemplateElement" data-x="dom-template-shadowrootdelegatesfocus">shadowRootDelegatesFocus</dfn>;
[<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLTemplateElement" data-x="dom-template-shadowrootclonable">shadowRootClonable</dfn>;
[<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLTemplateElement" data-x="dom-template-shadowRootSerializable">shadowRootSerializable</dfn>;
Expand Down Expand Up @@ -68148,6 +68158,11 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {
data-x="attr-template-shadowrootcustomelementregistry">shadowrootcustomelementregistry</code></dfn>
content attribute is a <span>boolean attribute</span>.</p>

<p>The <dfn element-attr for="template"><code
data-x="attr-template-shadowrootadoptedstylesheets">shadowrootadoptedstylesheets</code></dfn> content
contributes to the <span data-x="concept-DocumentFragment-host">host's</span>
<span>adoptedStyleSheets</span>.</p>

<p>The <span>template contents</span> of a <code>template</code> element <a
href="#template-syntax">are not children of the element itself</a>.</p>

Expand Down Expand Up @@ -68377,7 +68392,79 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {

</div>

<hr>

<div algorithm>
<p>The <dfn>stylesheet adopting steps</dfn> for <code>template</code> elements are:</p>

<ol>
<li><p>If the value of
<span data-x="attr-template-shadowrootadoptedstylesheets">shadowrootadoptedstylesheets</span> is
empty, then return.</p></li>
<li><p>Let <var>adoptedStyleSheets</var> be an empty array.</p></li>
<li><p><span data-x="split a string on ASCII whitespace">Split the attribute's value on ASCII
whitespace</span>, and let <var>specifiers</var> be the resulting tokens.</p></li>
<li><p><span data-x="list iterate">For each</span> <var>specifier</var> of <var>specifiers</var>:</p>
<ol>
<li><p>Let <var>url</var> be the result of <span data-x="resolve a module specifier">resolving
a module specifier</span> with <var>specifier</var>.</p> If
any errors occur, then <span>continue</span>.</li>
<li><p>Let <var>settingsObject</var> be the <span>current settings object</span>.</li>
<li><p>Let <var>moduleType</var> be "<code data-x="">css</code>".</p></li>
<li><p>Let <var>moduleMap</var> be <var>settingsObject</var>'s <span
data-x="concept-settings-object-module-map">module map</span>.</p></li>
<li><p>Let <var>moduleScript</var> be
<var>moduleMap</var>[(<var>url</var>, <var>moduleType</var>)].</p></li>
<li><p>If <var>moduleScript</var> is null, <span>fetch a single module script</span> given
<var>url</var>, <var>settingsObject</var>, "<code data-x="">style</code>", the
<span>default script fetch options</span>, <var>settingsObject</var>, "<code
data-x="">client</code>", true</p></li>
<li><p>Extract the <code>CSSStyleSheet</code> from <var>moduleScript</var>'s
<span data-x="concept-script-record">record</span> and append it to
<var>adoptedStyleSheets</var>. If any error occurs, remove all instances of the associated
<code>CSSStyleSheet</code> from <var>adoptedStyleSheets</var>and <span>continue</span>.</p></li>
</ol>
</li>
<li><p><span data-x="list extend">Extend</span> <span data-x="concept-DocumentFragment-host">host</span>'s
<span>adoptedStyleSheets</span> with <var>adoptedStyleSheets</var>.</p></li>
</ol>
</div>

<div class="example">

<p>This example demonstrates two equivalent methods to import CSS module scripts, the
first using the JavaScript <code data-x="">import</code> method and the second using the
<span data-x="attr-template-shadowrootadoptedstylesheets">shadowrootadoptedstylesheets</span>
attribute.</p>

<pre><code class="html">
&lt;script type="importmap">
{
"imports": {
"foo": "data:text/css,div {color:blue}"
}
}
&lt;/script>
&lt;div id="host">
&lt;template shadowrootmode="open">
&lt;script type="module">
import styles from "foo" with { type: "css"};
document.getElementById("host").shadowRoot.adoptedStyleSheets = [styles];
&lt;/script>
&lt;div>test&lt;/div>
&lt;/template>
&lt;/div>
Comment thread
KurtCattiSchmidt marked this conversation as resolved.
&lt;div id="host_shadowrootadoptedstylesheets_attribute">
&lt;template shadowrootmode="open" shadowrootadoptedstylesheets="foo">
&lt;div>test&lt;/div>
&lt;/template>
&lt;/div></code></pre>

<p class="note">Note that these two examples are functionally equivalent, but the example with
<span data-x="attr-template-shadowrootadoptedstylesheets">shadowrootadoptedstylesheets</span>
might initially render without styles applied.</p>

</div>

<div w-nodev>

Expand Down Expand Up @@ -117471,6 +117558,16 @@ document.querySelector("button").addEventListener("click", bound);
<li><p><span data-x="map set">Set</span> <var>moduleMap</var>[(<var>url</var>,
<var>moduleType</var>)] to "<code data-x="">fetching</code>".</p></li>

<li><p>If <var>destination</var> is "<code data-x="">style</code>", then:</p>
<ol>
<li><p>Let <var>emptyStyleScript</var> be the result of <span>creating a CSS module
script</span> with an empty <var>source</var> and <var>settingsObject</var></p></li>
<li><p><span data-x="map set">set</span> <var>moduleMap</var>[(<var>url</var>,
<var>moduleType</var>)] to <var>emptyStyleScript</var>, retaining the "<code
data-x="">fetching</code>" status.</p></li>
</ol>
</li>

<li><p>Let <var>request</var> be a new <span data-x="concept-request">request</span> whose
<span data-x="concept-request-url">URL</span> is <var>url</var>, <span
data-x="concept-request-mode">mode</span> is "<code data-x="">cors</code>", <span
Expand Down Expand Up @@ -117563,8 +117660,8 @@ document.querySelector("button").addEventListener("click", bound);

<li><p>If the <span>MIME type essence</span> of <var>mimeType</var> is "<code>text/css</code>"
and <var>moduleType</var> is "<code data-x="">css</code>", then set <var>moduleScript</var> to
the result of <span>creating a CSS module script</span> given <var>sourceText</var> and
<var>settingsObject</var>.</p></li>
the result of <span>updating a CSS module script</span> given <var>sourceText</var> and
<var>moduleMap</var>[(<var>url</var>,<var>moduleType</var>)].</p></li>

<li><p>If <var>mimeType</var> is a <span>JSON MIME type</span> and
<var>moduleType</var> is "<code data-x="">json</code>", then set <var>moduleScript</var> to
Expand Down Expand Up @@ -117875,6 +117972,32 @@ document.querySelector("button").addEventListener("click", bound);
</ol>
</div>

<div algorithm>
<p>To <dfn data-x="updating a CSS module script">update a CSS module script</dfn>, given a
string <var>source</var> and a <var>script</var> <span>module script</span> :</p>

<ol>
<li><p>Let <var>sheet</var> be the default export of <var>script</var></p></li>

<li>
<p>Run the steps to <span>synchronously replace the rules of a <code>CSSStyleSheet</code></span>
on <var>sheet</var> given <var>source</var>.</p>

<p>If this throws an exception, catch it, and set <var>script</var>'s <span
Copy link
Copy Markdown
Collaborator

@noamr noamr May 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Double "and", this is probably better as a set of steps.

Copy link
Copy Markdown
Contributor Author

@KurtCattiSchmidt KurtCattiSchmidt May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This block is used a few times in the spec (e.g. https://html.spec.whatwg.org/#creating-scripts:parsejsonmodule and part 6 of https://html.spec.whatwg.org/#creating-a-css-module-script). For now, I'd like to keep this consistent. I can file a separate bug and fix this everywhere though in parallel - what do you recommend?

data-x="concept-script-parse-error">parse error</span> to that exception, and return
<var>script</var>.</p>

<p class="note">The steps to <span>synchronously replace the rules of a
<code>CSSStyleSheet</code></span> will throw if <var>source</var> contains any <code
data-x="">@import</code> rules. This is by-design for now because there is not yet an
agreement on how to handle these for CSS module scripts; therefore they are blocked altogether
until a consensus is reached.</p>
</li>

<li><p>Return <var>script</var>.</p></li>
</ol>
</div>

<div algorithm>
<p>To <dfn data-x="creating a JSON module script">create a JSON module script</dfn>, given a
string <var>source</var> and an <span>environment settings object</span> <var>settings</var>:</p>
Expand Down Expand Up @@ -140818,6 +140941,10 @@ document.body.appendChild(text);
data-x="attr-template-shadowrootcustomelementregistry">shadowrootcustomelementregistry</code>
attribute, then set <var>shadow</var>'s <span>keep custom element registry null</span> to
true.</p></li>

<li><p>If <var>templateStartTag</var> has a <code
data-x="attr-template-shadowrootadoptedstylesheets">shadowrootadoptedstylesheets</code>
attribute, then perform the <span>stylesheet adopting steps</span> on <var>template</var>.</p></li>
</ol>
</li>
</ol>
Expand Down Expand Up @@ -144580,6 +144707,11 @@ document.body.appendChild(text);
<li><p>If <var>shadow</var>'s <span>clonable</span> is set, then append
"<code data-x=""> shadowrootclonable=&quot;&quot;</code>".</p></li>

<li><p>If <var>shadow</var>'s <code
data-x="attr-template-shadowrootadoptedstylesheets">shadowrootadoptedstylesheets</code> is set, then append
the value of <code
data-x="attr-template-shadowrootadoptedstylesheets">shadowrootadoptedstylesheets</code></p></li>

<li>
<p>Let <var>shouldAppendRegistryAttribute</var> be the result of running these steps:</p>

Expand Down Expand Up @@ -152487,7 +152619,8 @@ interface <dfn interface>External</dfn> {
<code data-x="attr-template-shadowrootdelegatesfocus">shadowrootdelegatesfocus</code>;
<code data-x="attr-template-shadowrootclonable">shadowrootclonable</code>;
<code data-x="attr-template-shadowrootserializable">shadowrootserializable</code>;
<code data-x="attr-template-shadowrootcustomelementregistry">shadowrootcustomelementregistry</code></td>
<code data-x="attr-template-shadowrootcustomelementregistry">shadowrootcustomelementregistry</code>;
<code data-x="attr-template-shadowrootadoptedstylesheets">shadowrootadoptedstylesheets</code></td>
<td><code>HTMLTemplateElement</code></td>
</tr>

Expand Down Expand Up @@ -154017,6 +154150,11 @@ interface <dfn interface>External</dfn> {
<td> <code data-x="attr-option-selected">option</code>
<td> Whether the option is selected by default
<td> <span>Boolean attribute</span>
<tr>
<th> <code data-x="">shadowrootadoptedstylesheets</code>
<td> <code data-x="attr-template-shadowrootadoptedstylesheets">template</code>
<td> Sets <span>adoptedStyleSheets</span> on a declarative shadow root
<td> <span>Ordered set of unique space-separated tokens</span> consisting of module specifiers*
<tr>
<th> <code data-x="">shadowrootclonable</code>
<td> <code data-x="attr-template-shadowrootclonable">template</code>
Expand Down
Loading