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 7 commits into
base: main
Choose a base branch
from
+141 −3
Open

shadowrootadoptedstylesheets on <template> #12339

Changes from all commits
Commits
Show all changes
7 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
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>For each <span>ordered set of unique space-separated tokens</span> <var>specifier</var> in
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.

I don't understand this line. Is the specifier an ordered set? I think this can just be "For each specifier" maybe?

<span data-x="attr-template-shadowrootadoptedstylesheets">shadowrootadoptedstylesheets</span>:</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>
Copy link
Copy Markdown
Contributor

@emilio emilio Apr 22, 2026

Choose a reason for hiding this comment

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

So how is this example guaranteed to work? The modulemap uses fetch, right? And that's asynchronous per spec. What guarantees that the data: uri is available by the time the adoption happens?

Copy link
Copy Markdown
Collaborator

@noamr noamr Apr 23, 2026

Choose a reason for hiding this comment

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

From what I read, the modulemap marks the module as "fetching", adopts an empty stylesheet, and calls the equivalent of replaceSync on the adopted empty stylesheet when the stylesheet response arrives.

Copy link
Copy Markdown
Contributor

@emilio emilio Apr 23, 2026

Choose a reason for hiding this comment

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

Ok, so there is a (very unlikely) chance of FOUC, but no chance of it not working right? Makes sense, might be worth a note?

Copy link
Copy Markdown
Contributor Author

@KurtCattiSchmidt KurtCattiSchmidt Apr 29, 2026

Choose a reason for hiding this comment

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

Added a note to the example, thanks for looking @emilio!

<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>

&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.

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