Declarative CSS Modules

source

@@ -4131,6 +4131,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x="event-scrollend" data-x-href="https://drafts.csswg.org/cssom-view/#eventdef-document-scrollend"><code>scrollend</code></dfn> event</li>
      <li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#set-up-browsing-context-features">set up browsing context features</dfn></li>
      <li>The <dfn data-x="mouseevent-clientx" data-x-href="https://drafts.csswg.org/cssom-view/#dom-mouseevent-clientx">clientX</dfn> and <dfn data-x="mouseevent-clienty" data-x-href="https://drafts.csswg.org/cssom-view/#dom-mouseevent-clienty">clientY</dfn> extension attributes of the <span>MouseEvent</span> interface</li>
+     <li>
+      <dfn data-x="concept-documentorshadowroot-extensions-mixin"
+      data-x-href="https://www.w3.org/TR/cssom-1/#extensions-to-the-document-or-shadow-root-interface">Extensions to the <code>DocumentOrShadowRoot</code> Interface Mixin</dfn>:
+      <ul class="brief">
+       <li><dfn data-x="concept-documentorshadowroot-extensions-mixin-stylesheets" data-x-href="https://www.w3.org/TR/cssom-1/#dom-documentorshadowroot-stylesheets">styleSheets</dfn></li>
+       <li><dfn data-x="adoptedstylesheets" data-x-href="https://www.w3.org/TR/cssom-1/#dom-documentorshadowroot-adoptedstylesheets">adoptedStyleSheets</dfn></li>
+      </ul>
+     </li>
     </ul>
 
     <p>The following features and terms are defined in <cite>CSS Syntax</cite>:
@@ -18513,6 +18521,7 @@ people expect to have work and what is necessary.
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-style-media">media</code></dd>
    <dd><code data-x="attr-style-blocking">blocking</code></dd>
+   <dd><code data-x="attr-style-specifier">specifier</code></dd>
    <dd>Also, the <code data-x="attr-style-title">title</code> attribute <span data-x="attr-style-title">has special semantics</span> on this element.</dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
@@ -18527,6 +18536,7 @@ interface <dfn interface>HTMLStyleElement</dfn> : <span>HTMLElement</span> {
   attribute boolean <span data-x="dom-style-disabled">disabled</span>;
   [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLStyleElement" data-x="dom-style-media">media</dfn>;
   [SameObject, PutForwards=<span data-x="dom-DOMTokenList-value">value</span>, <span data-x="xattr-Reflect">Reflect</span>] readonly attribute <span>DOMTokenList</span> <dfn attribute for="HTMLStyleElement" data-x="dom-style-blocking">blocking</dfn>;
+  [SameObject, PutForwards=value, Reflect] readonly attribute DOMString specifier;
 
   // <a href="#HTMLStyleElement-partial">also has obsolete members</a>
 };
@@ -18602,6 +18612,10 @@ console.log(style.disabled); // false</code></pre>
   <p>The <dfn element-attr for="style"><code data-x="attr-style-blocking">blocking</code></dfn>
   attribute is a <span>blocking attribute</span>.</p>
 
+  <p>The <dfn element-attr for="style"><code data-x="attr-style-specifier">specifier</code></dfn>
+  attribute defines an exportable <span
+  data-x="specifier-resolution-record-specifier">specifier</span>.</p>
+
   <p id="title-on-style">The <dfn element-attr for="style"><code
   data-x="attr-style-title">title</code></dfn> attribute on <code>style</code> elements defines
   <span data-x="CSS style sheet set">CSS style sheet sets</span>. If the <code>style</code> element
@@ -18831,7 +18845,79 @@ console.log(style.disabled); // false</code></pre>
 
   </div>
 
+  <p>The user agent must run the <span>create a declarative CSS module script</span> algorithm when
+  all of the following conditions are true:</p>
+
+  <ul>
+   <li><p>The element is popped off the <span>stack of open elements</span> of an <span>HTML
+   parser</span> or <span>XML parser</span>.</p></li>
+
+   <li><p>The element is not on the <span>stack of open elements</span> of an <span>HTML
+   parser</span> or <span>XML parser</span>, and it <span>becomes connected</span>.</p></li>
+  </ul>
+
+  <div algorithm>
+  <p>The <dfn export>create a declarative CSS module script</dfn> algorithm is as follows:</p>
+
+  <ol>
+   <li><p>Let <var>element</var> be the <code>style</code> element.</p></li>
+
+   <li><p>If <var>element</var> is not <span>connected</span>, then return.</p></li>
+   <!-- See:
+          https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2740
+          https://github.com/w3c/csswg-drafts/issues/3096 -->
+
+   <li><p>If <var>element</var>'s <code data-x="attr-style-type">type</code> attribute is present
+   and its value is not an <span>ASCII case-insensitive</span> match for
+   "<code data-x="">module</code>", then return.</p></li>
+
+   <li><p>If <var>element</var>'s <code data-x="attr-style-specifier">specifier</code> attribute
+   is not present or its value is an empty string, then return.</p></li>
+
+   <li><p>If the <span>Should element's inline behavior be blocked by Content Security
+   Policy?</span> algorithm returns "<code data-x="">Blocked</code>" when executed upon the
+   <code>style</code> element, "<code data-x="">style</code>", and the <code>style</code>
+   element's <span>child text content</span>, then return. <ref>CSP</ref></p></li>
+
+   <li><p>Let <var>styleDataURI</var> be the string "<code data-x="">data:text/css,</code>"
+   appended with the <span>child text content</span> of the <code>style</code>
+   element.</p></li>
+
+   <li>
+    <p>Create a JSON object with the following properties:</p>
+
+    <ol>
+      <li>A single key of "<code data-x="">imports</code>".</li>
+      <li>A single JSON value containing a <span>module specifier map</span> with a key consisting
+      of the value of <span data-x="attr-style-specifier">specifier attribute</span> and a value
+      of a <span data-x="UTF-8 percent-encode">UTF-8 percent-encoding</span> of
+      <var>styleDataURI</var>.</li>
+    </ol>
+   </li>
+   <li>Perform <span>parse an import map string</span> with <var>input</var> as the resulting JSON
+    string from the prior step and <var>baseURL</var> as the <span>document base URL</span>.</li>
+  </ol>
+  </div>
+
+  <div class="example">
 
+    <p>For example, a <code>style</code> element defined as follows:</p>
+
+    <pre><code class="html">
+&lt;style type="module" specifier="foo">body { background: navy; color: yellow; }&lt;/style>
+    </code></pre>
+
+    <p>Is equivalent to the following <span>import map</span> definition:</p>
+
+    <pre><code class="html" data-x="">
+&lt;script type="importmap">
+{
+  "imports": {
+    "foo": "data%3Atext%2Fcss%2Cbody%20%7B%20background%3A%20navy%3B%20color%3A%20yellow%3B%20%7D"
+  }
+}
+&lt;/script></code></pre>
+  </div>
 
   <div w-nodev>
 
@@ -67818,6 +67904,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>
@@ -67834,6 +67921,7 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {
   [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLTemplateElement" data-x="dom-template-shadowrootclonable">shadowRootClonable</dfn>;
   [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLTemplateElement" data-x="dom-template-shadowRootSerializable">shadowRootSerializable</dfn>;
   [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLTemplateElement" data-x="dom-template-shadowRootCustomElementRegistry">shadowRootCustomElementRegistry</dfn>;
+  [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLTemplateElement" data-x="dom-template-shadowrootadoptedstylesheets">shadowRootAdoptedStyleSheets</dfn>;
 };</code></pre>
 </dd>
    <dd w-dev>Uses <code>HTMLTemplateElement</code>.</dd>
@@ -67886,6 +67974,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>
 
@@ -68108,7 +68201,71 @@ 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>unordered 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> given <var>moduleScript</var> and <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, then <span>continue</span>.</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="set append">Append</span> <span>adoptedStyleSheets</span> to the
+   <span data-x="concept-DocumentFragment-host">host</span>'s <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>
 
@@ -151699,7 +151856,8 @@ interface <dfn interface>External</dfn> {
      <td>text*</td>
      <td><span data-x="global attributes">globals</span>;
          <code data-x="attr-style-media">media</code>;
-         <code data-x="attr-style-blocking">blocking</code></td>
+         <code data-x="attr-style-blocking">blocking</code>
+         <code data-x="attr-style-specifier">specifier</code></td>
      <td><code>HTMLStyleElement</code></td>
     </tr>
 
@@ -151809,7 +151967,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>
 
@@ -153322,6 +153481,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> <a href="#attribute-text">Text</a>
     <tr>
      <th> <code data-x="">shadowrootclonable</code>
      <td> <code data-x="attr-template-shadowrootclonable">template</code>
@@ -153391,6 +153555,11 @@ interface <dfn interface>External</dfn> {
      <td> "<code data-x="attr-spellcheck-true">true</code>";
           "<code data-x="attr-spellcheck-false">false</code>";
           the empty string
+    <tr>
+     <th> <code data-x="">specifier</code>
+     <td> <code data-x="attr-style-specifier">style</code>
+     <td> A <span data-x="specifier-resolution-record-specifier">specifier</span> value used in a <span>module specifier map</span>
+     <td> <a href="#attribute-text">Text</a>
     <tr>
      <th> <code data-x="">src</code>
      <td> <code data-x="attr-media-src">audio</code>;
@@ -156406,6 +156575,7 @@ INSERT INTERFACES HERE
   Kristof Zelechovski,
   Krzysztof Maczy&#x0144;ski,
   &#x9ed2;&#x6fa4;&#x525b;&#x5fd7; (Kurosawa Takeshi),
+  Kurt Catti-Schmidt,
   Kyle Barnhart,
   Kyle Hofmann<!-- Ozob -->,
   Kyle Huey,