diff --git a/source b/source index 877761a9424..fcab0e82a65 100644 --- a/source +++ b/source @@ -3123,6 +3123,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The IsDataDescriptor abstract operation
  • The IsDetachedBuffer abstract operation
  • The IsSharedArrayBuffer abstract operation
    • +
  • The JSON.stringify abstract operation
  • The NewObjectEnvironment abstract operation
  • The NormalCompletion abstract operation
    • @@ -4131,6 +4132,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 +18521,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 +18536,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 +18612,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 +18845,86 @@ 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 styleBlob be the result of creating a Blob object representing + a file containing the style element's child text content with a + type of "text/css".

      7. + +

    7. Let styleBlobURL be the blob URL entry + associated with styleBlob.

      8. + +

    8. Create a JSON object jsonObject with a single key of "imports" + whose value is a single JSON object containing a module specifier map with a key consisting + of the value of the specifier attribute and a value of + styleBlobURL.

      9. + +

    9. Let jsonString be the result of calling JSON.stringify on + jsonObject.

      10. + +

    10. Let importMapParseResult be the result of Create an import map parse result + with input as jsonString and baseURL as the document base URL.

      11. + +

    11. If importMapParseResult's error to rethrow is + not null, then continue.

      12. + +

    12. Register an import map using element's relevant global object + and importMapParseResult.

      13. +
    +
    + +
    + +

    For example, a style element defined as follows:

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

    Is equivalent to the following dynamically created import map definition:

    + + 
    
+<script>
+  const blob_url = URL.createObjectURL(new Blob(["body { background: navy; color: yellow; }"], {type: "text/css"}));
+  const import_map = document.createElement("script");
+  import_map.setAttribute("type", "importmap");
+  const json_string = "{ \"imports\": { \"foo\": \"" + blob_url +  "\" }}";
+  import_map.innerText = json_string;
+  document.body.appendChild(import_map);
+</script>
    +
    @@ -67818,6 +67911,7 @@ not-slash = %x0000-002E / %x0030-10FFFF
    shadowrootclonable
    shadowrootserializable
    shadowrootcustomelementregistry
    +
    shadowrootadoptedstylesheets
    Accessibility considerations:
    For authors.
    @@ -67834,6 +67928,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 +67981,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 +68208,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 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>
    + +
    @@ -140229,6 +140393,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.

    • @@ -148489,9 +148657,9 @@ if (s = prompt('What is your name?')) { attribute on script elements that is the empty string or a JavaScript MIME type essence match. Instead, they should omit the attribute, which has the same effect.

    -

    Authors should not specify a type attribute on a - style element. If the attribute is present, its value must be an ASCII - case-insensitive match for "text/css".

    +

    Authors should not specify a value for the type + attribute on style elements that is an ASCII case-insensitive match for + "text/css". Instead, they should omit the attribute, which has the same effect.

    Authors should not specify the name attribute on a elements. If the attribute is present, its value must not be the empty string and @@ -151699,7 +151867,8 @@ interface External { text* globals; media; - blocking + blocking; + specifier HTMLStyleElement @@ -151809,7 +151978,8 @@ interface External { shadowrootdelegatesfocus; shadowrootclonable; shadowrootserializable; - shadowrootcustomelementregistry + shadowrootcustomelementregistry; + shadowrootadoptedstylesheets HTMLTemplateElement @@ -153322,6 +153492,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 +153566,11 @@ interface External { "true"; "false"; the empty string + + specifier + style + A specifier value used in a module specifier map + Text src audio; @@ -156406,6 +156586,7 @@ INSERT INTERFACES HERE Kristof Zelechovski, Krzysztof Maczyński, 黒澤剛志 (Kurosawa Takeshi), + Kurt Catti-Schmidt, Kyle Barnhart, Kyle Hofmann, Kyle Huey,