diff --git a/source b/source index 8419eda4468..b99bb2e5998 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 @@ -4132,6 +4133,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 +68088,7 @@ not-slash = %x0000-002E / %x0030-10FFFF
    shadowrootclonable
    shadowrootserializable
    shadowrootcustomelementregistry
    +
    shadowrootadoptedstylesheets
    Accessibility considerations:
    For authors.
    @@ -68092,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; @@ -68148,6 +68158,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 +68392,79 @@ 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 ordered set of unique space-separated tokens specifier in + shadowrootadoptedstylesheets:

      +
        +

      1. Let url be the result of resolving + a module specifier with 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, fetch a single module script given + url, settingsObject, "style", the + default script fetch options, settingsObject, "client", true

        7. +

      7. Extract the CSSStyleSheet from moduleScript's + record and append it to + adoptedStyleSheets. If any error occurs, remove all instances of the associated + CSSStyleSheet from adoptedStyleSheetsand 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>
    + +

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

    +
    @@ -117471,6 +117558,16 @@ document.querySelector("button").addEventListener("click", bound);

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

    • +

  • 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. +
    +
    • +

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

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

  • If mimeType is a JSON MIME type and moduleType is "json", then set moduleScript to @@ -117875,6 +117972,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:

    @@ -140818,6 +140941,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.

    • @@ -144580,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:

    @@ -152487,7 +152619,8 @@ interface External { shadowrootdelegatesfocus; shadowrootclonable; shadowrootserializable; - shadowrootcustomelementregistry + shadowrootcustomelementregistry; + shadowrootadoptedstylesheets HTMLTemplateElement @@ -154017,6 +154150,11 @@ interface External { option Whether the option is selected by default Boolean attribute + + shadowrootadoptedstylesheets + template + Sets adoptedStyleSheets on a declarative shadow root + Ordered set of unique space-separated tokens consisting of module specifiers* shadowrootclonable template