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

shadowrootadoptedstylesheets on <template> #12339

Changes from all commits
Commits
Show all changes
5 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
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
133 changes: 130 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 Down Expand Up @@ -68148,6 +68157,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 +68391,74 @@ 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
<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, then <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>
&lt;div id="host_shadowrootadoptedstylesheets_attribute">
&lt;template shadowrootmode="open" shadowrootadoptedstylesheets="foo">
&lt;div>test&lt;/div>
&lt;/template>
&lt;/div></code></pre>

</div>

<div w-nodev>

Expand Down Expand Up @@ -117471,6 +117552,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 +117654,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 +117966,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
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 +140935,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 @@ -152487,7 +152608,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 +154139,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