-
Notifications
You must be signed in to change notification settings - Fork 3k
Declarative CSS Modules #11687
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Declarative CSS Modules #11687
Changes from 12 commits
7f91f78
b8c96ae
4487b30
fde2e28
141c474
c174820
477caa7
582566e
ccac8fe
746cdad
ca450c7
d8cae13
11fcb56
9e2f7ee
b2c6025
adf1484
05edbed
6cee43f
6a95872
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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> | ||
KurtCattiSchmidt marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
KurtCattiSchmidt marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
<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> | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I guess this is also the point where we'd also check a new equivalent of the already started flag to ensure a given There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah I'll have to think about this a little more. I will likely bring this up soon with the WHATWG. |
||
<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 | ||
KurtCattiSchmidt marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
and its value is not an <span>ASCII case-insensitive</span> match for | ||
KurtCattiSchmidt marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
"<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> | ||
KurtCattiSchmidt marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
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 | ||
KurtCattiSchmidt marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
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> | ||
KurtCattiSchmidt marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
</ol> | ||
</li> | ||
<li>Perform <span>parse an import map string</span> with <var>input</var> as the resulting JSON | ||
KurtCattiSchmidt marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
string from the prior step and <var>baseURL</var> as the <span>document base URL</span>.</li> | ||
KurtCattiSchmidt marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
</ol> | ||
</div> | ||
|
||
<div class="example"> | ||
|
||
<p>For example, a <code>style</code> element defined as follows:</p> | ||
|
||
<pre><code class="html"> | ||
<style type="module" specifier="foo">body { background: navy; color: yellow; }</style> | ||
</code></pre> | ||
|
||
<p>Is equivalent to the following <span>import map</span> definition:</p> | ||
|
||
<pre><code class="html" data-x=""> | ||
<script type="importmap"> | ||
{ | ||
"imports": { | ||
"foo": "data%3Atext%2Fcss%2Cbody%20%7B%20background%3A%20navy%3B%20color%3A%20yellow%3B%20%7D" | ||
} | ||
} | ||
</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> | ||
KurtCattiSchmidt marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
<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 | ||
KurtCattiSchmidt marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
<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 | ||
KurtCattiSchmidt marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
<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"> | ||
<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></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ński, | ||
黒澤剛志 (Kurosawa Takeshi), | ||
Kurt Catti-Schmidt, | ||
Kyle Barnhart, | ||
Kyle Hofmann<!-- Ozob -->, | ||
Kyle Huey, | ||
|
Uh oh!
There was an error while loading. Please reload this page.