diff --git a/source b/source index 877761a9424..0e878d8a30a 100644 --- a/source +++ b/source @@ -4131,6 +4131,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The scrollend event
  • set up browsing context features
  • The clientX and clientY extension attributes of the MouseEvent interface
    • +
  • + Extensions to the DocumentOrShadowRoot Interface Mixin: + +

    • The following features and terms are defined in CSS Syntax: @@ -18513,6 +18520,7 @@ people expect to have work and what is necessary.

    Global attributes
    media
    blocking
    +
    specifier
    Also, the title attribute has special semantics on this element.
    Accessibility considerations:
    @@ -18527,6 +18535,7 @@ interface HTMLStyleElement : HTMLElement { attribute boolean disabled; [CEReactions, Reflect] attribute DOMString media; [SameObject, PutForwards=value, Reflect] readonly attribute DOMTokenList blocking; + [SameObject, PutForwards=value, Reflect] readonly attribute DOMString specifier; // also has obsolete members }; @@ -18602,6 +18611,10 @@ console.log(style.disabled); // false

    The blocking attribute is a blocking attribute.

    +

    The specifier + attribute defines an exportable specifier.

    +

    The title attribute on style elements defines CSS style sheet sets. If the style element @@ -18831,7 +18844,76 @@ console.log(style.disabled); // false +

    The user agent must run the create a declarative CSS module script algorithm when + all of the following conditions are true:

    + + +
    +

    The create a declarative CSS module script algorithm is as follows:

    + +
      +

    1. Let element be the style element.

      2. + +

    2. If element is not connected, then return.

      3. + + +

    3. If element's type attribute is not present + or its value is not an ASCII case-insensitive match for + "module", then return.

      4. + +

    4. If element's specifier attribute + is not present or its value is an empty string, then return.

      5. + +

    5. If the Should element's inline behavior be blocked by Content Security + Policy? algorithm returns "Blocked" when executed upon the + style element, "style", and the style + element's child text content, then return. CSP

      6. + +

    6. Let styleDataURI be the string "data:text/css," + appended with the result of running UTF-8 percent-encode + on the child text content of the style element.

      7. + +

    7. Create a JSON string jsonString with a single key of "imports" + whose value is a single JSON string containing a module specifier map with a key consisting + of the value of the specifier attribute and a value of + styleDataURI.

      8. + +

    8. Create an import map parse result with input as jsonString + and baseURL as the document base URL.

      9. + +

    9. Register an import map using element's relevant global + object and the resulting import map parse result from the prior step.

      10. +
    +
    + +
    + +

    For example, a style element defined as follows:

    + + 
    
+<style type="module" specifier="foo">body { background: navy; color: yellow; }</style>
+
    + +

    Is equivalent to the following import map definition:

    + + 
    
+<script type="importmap">
+{
+  "imports": {
+    "foo": "data:text/css,body%20%7B%20background%3A%20navy%3B%20color%3A%20yellow%3B%20%7D"
+  }
+}
+</script>
    +
    @@ -67818,6 +67900,7 @@ not-slash = %x0000-002E / %x0030-10FFFF
    shadowrootclonable
    shadowrootserializable
    shadowrootcustomelementregistry
    +
    shadowrootadoptedstylesheets
    Accessibility considerations:
    For authors.
    @@ -67834,6 +67917,7 @@ interface HTMLTemplateElement : HTMLElement { [CEReactions, Reflect] attribute boolean shadowRootClonable; [CEReactions, Reflect] attribute boolean shadowRootSerializable; [CEReactions, Reflect] attribute DOMString shadowRootCustomElementRegistry; + [CEReactions, Reflect] attribute DOMString shadowRootAdoptedStyleSheets; };
    Uses HTMLTemplateElement.
    @@ -67886,6 +67970,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.

    @@ -68108,7 +68197,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. +

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

        8. +
      +
      4. +

    4. Extend adoptedStyleSheets to the + host's 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>
    + +
    @@ -140229,6 +140382,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 stylesheet adopting steps on template.

    • @@ -151699,7 +151856,8 @@ interface External { text* globals; media; - blocking + blocking; + specifier HTMLStyleElement @@ -151809,7 +151967,8 @@ interface External { shadowrootdelegatesfocus; shadowrootclonable; shadowrootserializable; - shadowrootcustomelementregistry + shadowrootcustomelementregistry; + shadowrootadoptedstylesheets HTMLTemplateElement @@ -153322,6 +153481,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 @@ -153391,6 +153555,11 @@ interface External { "true"; "false"; the empty string + + specifier + style + A specifier value used in a module specifier map + Text src audio; @@ -156406,6 +156575,7 @@ INSERT INTERFACES HERE Kristof Zelechovski, Krzysztof Maczyński, 黒澤剛志 (Kurosawa Takeshi), + Kurt Catti-Schmidt, Kyle Barnhart, Kyle Hofmann, Kyle Huey,