From a7ece9830aef70e9470e5365f0820a18186f18ea Mon Sep 17 00:00:00 2001 From: Kurt Catti-Schmidt Date: Tue, 31 Mar 2026 15:27:22 -0700 Subject: [PATCH 1/8] Initial port, needs fetch --- source | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 88 insertions(+), 1 deletion(-) diff --git a/source b/source index 8419eda4468..2208803b70e 100644 --- a/source +++ b/source @@ -4132,6 +4132,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • Serializing a CSS value
  • run the resize steps
  • run the scroll steps
    • +
  • + Extensions to the DocumentOrShadowRoot Interface Mixin: + +
  • evaluate media queries and report changes
  • Scroll a target into view
  • Scroll to the beginning of the document
    • @@ -68080,6 +68087,7 @@ not-slash = %x0000-002E / %x0030-10FFFF
    shadowrootclonable
    shadowrootserializable
    shadowrootcustomelementregistry
    +
    shadowrootadoptedstylesheets
    Accessibility considerations:
    For authors.
    @@ -68148,6 +68156,11 @@ interface HTMLTemplateElement : HTMLElement { data-x="attr-template-shadowrootcustomelementregistry">shadowrootcustomelementregistry content attribute is a boolean attribute.

    +

    The shadowrootadoptedstylesheets content + contributes to the host's + adoptedStyleSheets.

    +

    The template contents of a template element are not children of the element itself.

    @@ -68377,7 +68390,71 @@ interface HTMLTemplateElement : HTMLElement { +
    + +
    +

    The stylesheet adopting steps for template elements are:

    + +
      +

    1. If the value of + shadowrootadoptedstylesheets is + empty, then return.

      2. +

    2. Let adoptedStyleSheets be an empty array.

      3. + +

    3. For each unordered set of unique space-separated tokens specifier in + shadowrootadoptedstylesheets:

      +
        +

      1. Let url be the result of resolving + a module specifier given moduleScript and specifier.

        If + any errors occur, then continue.
        2. +

      2. Let settingsObject be the current settings object.

        3. +

      3. Let moduleType be "css".

        4. +

      4. Let moduleMap be settingsObject's module map.

        5. +

      5. Let moduleScript be + moduleMap[(url, moduleType)].

        6. +

      6. If moduleScript is null, then continue.

        7. // TODO(kschmi): Add fetch!!!!!!!!!!!!!!!!! +

      7. Extract the CSSStyleSheet from moduleScript's + record and append it to + adoptedStyleSheets. If any error occurs, then continue.

        8. +
      +
      4. +

    4. Extend host's + adoptedStyleSheets with adoptedStyleSheets.

      5. +
    +
    + +
    +

    This example demonstrates two equivalent methods to import CSS module scripts, the + first using the JavaScript import method and the second using the + shadowrootadoptedstylesheets + attribute.

    + + 
    
+<script type="importmap">
+{
+  "imports": {
+    "foo": "data:text/css,div {color:blue}"
+  }
+}
+</script>
+<div id="host">
+  <template shadowrootmode="open">
+    <script type="module">
+      import styles from "foo" with { type: "css"};
+      document.getElementById("host").shadowRoot.adoptedStyleSheets = [styles];
+    </script>
+    <div>test</div>
+  </template>
+</div>
+<div id="host_shadowrootadoptedstylesheets_attribute">
+  <template shadowrootmode="open" shadowrootadoptedstylesheets="foo">
+    <div>test</div>
+  </template>
+</div>
    + +
    @@ -140818,6 +140895,10 @@ document.body.appendChild(text); data-x="attr-template-shadowrootcustomelementregistry">shadowrootcustomelementregistry attribute, then set shadow's keep custom element registry null to true.

    + +

  • If templateStartTag has a shadowrootadoptedstylesheets + attribute, then perform the stylesheet adopting steps on template.

    • @@ -152487,7 +152568,8 @@ interface External { shadowrootdelegatesfocus; shadowrootclonable; shadowrootserializable; - shadowrootcustomelementregistry + shadowrootcustomelementregistry; + shadowrootadoptedstylesheets HTMLTemplateElement @@ -154017,6 +154099,11 @@ interface External { option Whether the option is selected by default Boolean attribute + + shadowrootadoptedstylesheets + template + Sets adoptedStyleSheets on a declarative shadow root + Text shadowrootclonable template From b576c0949c8412dd616b6dd2b1b63a5c7e12dbb8 Mon Sep 17 00:00:00 2001 From: Kurt Catti-Schmidt Date: Mon, 6 Apr 2026 11:41:40 -0700 Subject: [PATCH 2/8] Adding fetch, still rough --- source | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/source b/source index 2208803b70e..9eb37d3bec5 100644 --- a/source +++ b/source @@ -4107,6 +4107,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • create a constructed CSSStyleSheet
  • synchronously replace the rules of a CSSStyleSheet
  • disable a CSS style sheet
    • +
  • replaceSync
  • CSS style sheets and their @@ -68405,7 +68406,7 @@ interface HTMLTemplateElement : HTMLElement { shadowrootadoptedstylesheets:

    1. Let url be the result of resolving - a module specifier given moduleScript and specifier.

      If + a module specifier with specifier.

      If any errors occur, then continue.

    2. Let settingsObject be the current settings object.

    3. Let moduleType be "css".

      4. @@ -68413,7 +68414,26 @@ interface HTMLTemplateElement : HTMLElement { data-x="concept-settings-object-module-map">module map.

    4. Let moduleScript be moduleMap[(url, moduleType)].

      5. -

    5. If moduleScript is null, then continue.

      6. // TODO(kschmi): Add fetch!!!!!!!!!!!!!!!!! +

    6. If moduleScript is null:

      +
        +

      • Set moduleScript to the result of create a CSS module script with an empty + source and settingsObject.

        • +

      • Set moduleMap[(url, moduleType)] to + moduleScript.

        • +

      • Fetch a single module script given url, + settingsObject, "style", the + default script fetch options, settingsObject, "client", true, and with the following steps given result:

        +
          +

        • If result is null, then continue.

          • +

        • Extract the CSSStyleSheet from result's record and replaceSync on the + underlying CSSStyleSheet with the contents of result.

          • +
        +
        • +
      +

    7. Extract the CSSStyleSheet from moduleScript's record and append it to adoptedStyleSheets. If any error occurs, then continue.

      8. From aeca13231cce11d9cd7ea6aa79d7f58fa8f0ba25 Mon Sep 17 00:00:00 2001 From: Kurt Catti-Schmidt Date: Mon, 6 Apr 2026 11:59:25 -0700 Subject: [PATCH 3/8] Clarifying the two sheets --- source | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/source b/source index 9eb37d3bec5..7ed87fdc824 100644 --- a/source +++ b/source @@ -68426,10 +68426,16 @@ interface HTMLTemplateElement : HTMLElement { default script fetch options, settingsObject, "client", true, and with the following steps given result:

        -

      • If result is null, then continue.

        • -

      • Extract the CSSStyleSheet from result's record and replaceSync on the - underlying CSSStyleSheet with the contents of result.

        • +

      • If result is null, then abort these steps.

        • +

      • Let fetchedSheet be the CSSStyleSheet extracted from + result's record.

        • +

      • Let existingSheet be the CSSStyleSheet extracted from + moduleScript's record.

        • +

      • Call replaceSync on existingSheet given the + CSS text of + fetchedSheet.

      From 8cdd1370431399dbe61fa9d041cd00a60a6d3153 Mon Sep 17 00:00:00 2001 From: Kurt Catti-Schmidt Date: Tue, 7 Apr 2026 09:48:10 -0700 Subject: [PATCH 4/8] Updating steps and fixing error --- source | 70 +++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 42 insertions(+), 28 deletions(-) diff --git a/source b/source index 7ed87fdc824..bb5a7bc8a6d 100644 --- a/source +++ b/source @@ -68414,32 +68414,10 @@ interface HTMLTemplateElement : HTMLElement { data-x="concept-settings-object-module-map">module map.

    8. Let moduleScript be moduleMap[(url, moduleType)].

      9. -

    9. If moduleScript is null:

      -
        -

      • Set moduleScript to the result of create a CSS module script with an empty - source and settingsObject.

        • -

      • Set moduleMap[(url, moduleType)] to - moduleScript.

        • -

      • Fetch a single module script given url, - settingsObject, "style", the - default script fetch options, settingsObject, "client", true, and with the following steps given result:

        -
          -

        • If result is null, then abort these steps.

          • -

        • Let fetchedSheet be the CSSStyleSheet extracted from - result's record.

          • -

        • Let existingSheet be the CSSStyleSheet extracted from - moduleScript's record.

          • -

        • Call replaceSync on existingSheet given the - CSS text of - fetchedSheet.

          • -
        -
        • -
      -
      10. +

    10. If moduleScript is null, fetch a single module script given + url, settingsObject, "style", the + default script fetch options, settingsObject, "client", true

    11. Extract the CSSStyleSheet from moduleScript's record and append it to adoptedStyleSheets. If any error occurs, then continue.

      12. @@ -117574,6 +117552,16 @@ document.querySelector("button").addEventListener("click", bound);

    12. Set moduleMap[(url, moduleType)] to "fetching".

      13. +

    13. If destination is "style", then:

      +
        +

      1. Let emptyStyleScript be the result of creating a CSS module + script with an empty source and settingsObject

        2. +

      2. set moduleMap[(url, + moduleType)] to emptyStyleScript, retaining the "fetching" status.

        3. +
      +
      14. +

    14. Let request be a new request whose URL is url, mode is "cors",

      If the MIME type essence of mimeType is "text/css" and moduleType is "css", then set moduleScript to - the result of creating a CSS module script given sourceText and - settingsObject.

      15. + the result of updating a CSS module script given sourceText and + moduleMap[(url,moduleType)].

    15. If mimeType is a JSON MIME type and moduleType is "json", then set moduleScript to @@ -117978,6 +117966,32 @@ document.querySelector("button").addEventListener("click", bound);

    • +
    +

    To update a CSS module script, given a + string source and a script module script :

    + +
      +

    1. Let sheet be the default export of script

      2. + +
    2. +

      Run the steps to synchronously replace the rules of a CSSStyleSheet + on sheet given source.

      + +

      If this throws an exception, catch it, and set script's parse error to that exception, and return + script.

      + +

      The steps to synchronously replace the rules of a + CSSStyleSheet will throw if source contains any @import 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.

      +
      3. + +

    3. Return script.

      4. +
    +
    +

    To create a JSON module script, given a string source and an environment settings object settings:

    From 7eff3003b3bff1e23ad53e28b569a1db4bc364dd Mon Sep 17 00:00:00 2001 From: Kurt Catti-Schmidt Date: Tue, 7 Apr 2026 10:56:22 -0700 Subject: [PATCH 5/8] Ordered set of unique tokens --- source | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source b/source index bb5a7bc8a6d..372aa5004d0 100644 --- a/source +++ b/source @@ -68402,7 +68402,7 @@ interface HTMLTemplateElement : HTMLElement { empty, then return.

  • Let adoptedStyleSheets be an empty array.

    • -

  • For each unordered set of unique space-separated tokens specifier in +

  • For each ordered set of unique space-separated tokens specifier in shadowrootadoptedstylesheets:

    1. Let url be the result of resolving @@ -154143,7 +154143,7 @@ interface External { shadowrootadoptedstylesheets template Sets adoptedStyleSheets on a declarative shadow root - Text + Ordered set of unique space-separated tokens consisting of module specifiers* shadowrootclonable template From ed9b8f730f5cc6ce9aa40743efe6280ca6f6c528 Mon Sep 17 00:00:00 2001 From: Kurt Catti-Schmidt Date: Tue, 28 Apr 2026 17:22:52 -0700 Subject: [PATCH 6/8] Adding note about FOUC in example --- source | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/source b/source index 372aa5004d0..7d6c631e3e6 100644 --- a/source +++ b/source @@ -68458,6 +68458,10 @@ interface HTMLTemplateElement : HTMLElement { </template> </div> +

      Note that these two examples are functionally equivalent, but the example with + shadowrootadoptedstylesheets + might initially render without styles applied.

      +
    • From 6764c68ece8dad7bab9342fe9af3de1664da58fd Mon Sep 17 00:00:00 2001 From: Kurt Catti-Schmidt Date: Wed, 6 May 2026 14:12:48 -0700 Subject: [PATCH 7/8] Adding HTMLTemplateElement.shadowRootAdoptedStyleSheets, shadowrootserializable, and failed fetch behavior --- source | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/source b/source index 7d6c631e3e6..b99bb2e5998 100644 --- a/source +++ b/source @@ -68101,6 +68101,7 @@ interface HTMLTemplateElement : HTMLElement { readonly attribute DocumentFragment content; [CEReactions] attribute DOMString shadowRootMode; + [CEReactions, Reflect] attribute DOMString shadowRootAdoptedStyleSheets; [CEReactions, Reflect] attribute boolean shadowRootDelegatesFocus; [CEReactions, Reflect] attribute boolean shadowRootClonable; [CEReactions, Reflect] attribute boolean shadowRootSerializable; @@ -68420,7 +68421,8 @@ interface HTMLTemplateElement : HTMLElement { data-x="">client", true

  • Extract the CSSStyleSheet from moduleScript's record and append it to - adoptedStyleSheets. If any error occurs, then continue.

    • + adoptedStyleSheets. If any error occurs, remove all instances of the associated + CSSStyleSheet from adoptedStyleSheetsand continue.

  • Extend host's @@ -144705,6 +144707,11 @@ document.body.appendChild(text);

  • If shadow's clonable is set, then append " shadowrootclonable=""".

    • +

  • If shadow's shadowrootadoptedstylesheets is set, then append + the value of shadowrootadoptedstylesheets

    • +

  • Let shouldAppendRegistryAttribute be the result of running these steps:

    From 389718895924e1fa585ffd9b1ad135a7a0d7e4e3 Mon Sep 17 00:00:00 2001 From: Kurt Catti-Schmidt Date: Thu, 21 May 2026 11:43:05 -0700 Subject: [PATCH 8/8] Fixing specifier splitting by whitespace --- source | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source b/source index b99bb2e5998..1e517de4c16 100644 --- a/source +++ b/source @@ -68402,9 +68402,9 @@ interface HTMLTemplateElement : HTMLElement { shadowrootadoptedstylesheets is empty, then return.

  • Let adoptedStyleSheets be an empty array.

    • - -

  • For each ordered set of unique space-separated tokens specifier in - shadowrootadoptedstylesheets:

    +

  • Split the attribute's value on ASCII + whitespace, and let specifiers be the resulting tokens.

    • +

  • For each specifier of specifiers:

    1. Let url be the result of resolving a module specifier with specifier.

      If