Skip to content

Add shadowrootslotassignment attribute #12267

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.

Sign up for GitHub

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

Open
keithamus wants to merge 3 commits into
base: main
Choose a base branch
from
+56 −2
Open

Add shadowrootslotassignment attribute #12267

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8779a3e
Add shadowrootslotassignment attribute
keithamus Mar 16, 2026
c78ef20
Add template IDL reflection
keithamus Mar 17, 2026
f71532c
Reword spec to use attribute state not value
keithamus Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 56 additions & 2 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68244,6 +68244,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-shadowrootslotassignment">shadowrootslotassignment</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>
Expand All @@ -68260,6 +68261,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>] attribute DOMString <span data-x="dom-template-shadowrootslotassignment">shadowRootSlotAssignment</span>;
};</code></pre>
</dd>
<dd w-dev>Uses <code>HTMLTemplateElement</code>.</dd>
Expand Down Expand Up @@ -68312,6 +68314,32 @@ 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-shadowrootslotassignment">shadowrootslotassignment</code></dfn> content
attribute is an <span>enumerated attribute</span> with the following keywords and states:</p>

<table>
<thead>
<tr>
<th>Keyword
<th>State
<th>Brief description
<tbody>
<tr>
<td><dfn attr-value for="template/shadowrootslotassignment"><code data-x="attr-shadowrootslotassignment-named">named</code></dfn>
<td><dfn data-x="attr-shadowrootslotassignment-named-state">Named</dfn>
<td>The declarative shadow root uses named slot assignment.
<tr>
<td><dfn attr-value for="template/shadowrootslotassignment"><code data-x="attr-shadowrootslotassignment-manual">manual</code></dfn>
<td><dfn data-x="attr-shadowrootslotassignment-manual-state">Manual</dfn>
<td>The declarative shadow root uses manual slot assignment.
</table>

<p>The <code data-x="attr-template-shadowrootslotassignment">shadowrootslotassignment</code>
attribute's <i data-x="invalid value default">invalid value default</i> and <i data-x="missing
value default">missing value default</i> are both the <span
data-x="attr-shadowrootslotassignment-named-state">Named</span> state.</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>

Expand Down Expand Up @@ -68469,6 +68497,14 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {
data-x="dom-template-shadowRootCustomElementRegistry">shadowRootCustomElementRegistry</span> IDL
attribute intentionally does not have a boolean type so it can be extended.</p>

<div algorithm>
<p>The <dfn attribute for="HTMLTemplateElement"><code
data-x="dom-template-shadowrootslotassignment">shadowRootSlotAssignment</code></dfn> IDL attribute
must <span>reflect</span> the <code
data-x="attr-template-shadowrootslotassignment">shadowrootslotassignment</code> content attribute,
<span>limited to only known values</span>.</p>
</div>

<hr>

<div algorithm>
Expand Down Expand Up @@ -141138,6 +141174,13 @@ document.body.appendChild(text);
data-x="attr-template-shadowrootdelegatesfocus">shadowrootdelegatesfocus</code> attribute;
otherwise false.</p></li>

<li><p>Let <var>slotAssignment</var> be "<code data-x="">named</code>".</p></li>

<li><p>If <var>templateStartTag</var>'s <code
data-x="attr-template-shadowrootslotassignment">shadowrootslotassignment</code> attribute is
in the <span data-x="attr-shadowrootslotassignment-manual-state">Manual</span> state, then
set <var>slotAssignment</var> to "<code data-x="">manual</code>".</p></li>

<li><p>If <var>declarativeShadowHostElement</var> is a <span>shadow host</span>, then
<span>insert an element at the adjusted insertion location</span> with
<var>template</var>.</p></li>
Expand All @@ -141154,7 +141197,7 @@ document.body.appendChild(text);
<li>
<p><span data-x="concept-attach-a-shadow-root">Attach a shadow root</span> with
<var>declarativeShadowHostElement</var>, <var>mode</var>, <var>clonable</var>,
<var>serializable</var>, <var>delegatesFocus</var>, "<code data-x="">named</code>", and
<var>serializable</var>, <var>delegatesFocus</var>, <var>slotAssignment</var>, and
<var>registry</var>.</p>

<p>If an exception is thrown, then catch it and:</p>
Expand Down Expand Up @@ -144949,6 +144992,10 @@ document.body.appendChild(text);
<li><p>If <var>shadow</var>'s <span>clonable</span> is set, then append
"<code data-x=""> shadowrootclonable=&quot;&quot;</code>".</p></li>

<li><p>If <var>shadow</var>'s <span>slot assignment</span> is "<code
data-x="">manual</code>", then append "<code
data-x=""> shadowrootslotassignment=&quot;manual&quot;</code>".</p></li>

<li>
<p>Let <var>shouldAppendRegistryAttribute</var> be the result of running these steps:</p>

Expand Down Expand Up @@ -152882,7 +152929,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-shadowrootslotassignment">shadowrootslotassignment</code></td>
<td><code>HTMLTemplateElement</code></td>
</tr>

Expand Down Expand Up @@ -154438,6 +154486,12 @@ interface <dfn interface>External</dfn> {
<td> <code data-x="attr-template-shadowrootserializable">template</code>
<td> Sets <span data-x="shadow-serializable">serializable</span> on a declarative shadow root
<td> <span>Boolean attribute</span>
<tr>
<th> <code data-x="">shadowrootslotassignment</code>
<td> <code data-x="attr-template-shadowrootslotassignment">template</code>
<td> Sets <span>slot assignment</span> on a declarative shadow root
<td> "<code data-x="">named</code>";
"<code data-x="">manual</code>"
<tr>
<th> <code data-x="">shape</code>
<td> <code data-x="attr-area-shape">area</code>
Expand Down
Loading