Skip to content

Commit acfe96b

Browse files
mfreed7Yu Han
andauthored
Add imperative slot assignment API
Explainer: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Imperative-Shadow-DOM-Distribution-API.md. Corresponding HTML PR: whatwg/html#6561. Closes #860 by superseding it. Co-authored-by: Yu Han <[email protected]>
1 parent a73380f commit acfe96b

File tree

1 file changed

+50
-13
lines changed

1 file changed

+50
-13
lines changed

dom.bs

Lines changed: 50 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2175,6 +2175,12 @@ Unless stated otherwise it is null. A <a>slottable</a> is
21752175
<dfn export for=slottable id=slotable-assigned>assigned</dfn> if its <a>assigned slot</a> is
21762176
non-null.</p>
21772177

2178+
<p>A <a>slottable</a> has an associated <dfn export for=slottable>manual slot assignment</dfn> (null
2179+
or a <a>slot</a>). Unless stated otherwise, it is null.
2180+
2181+
<p class=note>A <a>slottable</a>'s <a>manual slot assignment</a> can be implemented using a weak
2182+
reference to the <a>slot</a>, because this variable is not directly accessible from script.
2183+
21782184
<h5 id=finding-slots-and-slotables>Finding slots and slottables</h5>
21792185

21802186
<p>To <dfn export lt="find a slot|finding a slot">find a slot</dfn> for a given <a>slottable</a>
@@ -2192,6 +2198,11 @@ steps:</p>
21922198
<li><p>If the <i>open flag</i> is set and <var>shadow</var>'s <a for=ShadowRoot>mode</a> is
21932199
<em>not</em> "<code>open</code>", then return null.</p></li>
21942200

2201+
<li><p>If <var>shadow</var>'s <a for=ShadowRoot>slot assignment</a> is "<code>manual</code>", then
2202+
return the <a>slot</a> in <var>shadow</var>'s <a for=tree>descendants</a> whose
2203+
<a>manually assigned nodes</a> <a for=set>contains</a> <var>slottable</var>, if any, and null
2204+
otherwise.
2205+
21952206
<li><p>Return the first <a>slot</a> in <a>tree order</a> in <var>shadow</var>'s
21962207
<a for=tree>descendants</a> whose <a for=slot>name</a> is <var>slottable</var>'s
21972208
<a for=slottable>name</a>, if any, and null otherwise.</p></li>
@@ -2203,22 +2214,33 @@ for a given <a>slot</a> <var>slot</var>, run these steps:</p>
22032214
<ol>
22042215
<li><p>Let <var>result</var> be an empty list.</p></li>
22052216

2206-
<li><p>If <var>slot</var>'s <a for=tree>root</a> is not a <a for=/>shadow root</a>, then return
2207-
<var>result</var>.</p></li>
2217+
<li><p>Let <var>root</var> be <var>slot</var>'s <a for=tree>root</a>.
2218+
2219+
<li><p>If <var>root</var> is not a <a for=/>shadow root</a>, then return <var>result</var>.
2220+
2221+
<li><p>Let <var>host</var> be <var>root</var>'s <a for=DocumentFragment>host</a>.
22082222

2209-
<li><p>Let <var>host</var> be <var>slot</var>'s <a for=tree>root</a>'s
2210-
<a for=DocumentFragment>host</a>.</p></li>
2223+
<li>
2224+
<p>If <var>root</var>'s <a for=ShadowRoot>slot assignment</a> is "<code>manual</code>", then:
2225+
2226+
<ol>
2227+
<li><p>Let <var>result</var> be « ».
2228+
2229+
<li><p><a for=set>For each</a> <a>slottable</a> <var>slottable</var> of <var>slot</var>'s
2230+
<a>manually assigned nodes</a>, if <var>slottable</var>'s <a for=tree>parent</a> is
2231+
<var>host</var>, <a for=list>append</a> <var>slottable</var> to <var>result</var>.
2232+
</ol>
22112233

22122234
<li>
2213-
<p>For each <a>slottable</a> <a for=tree>child</a> of <var>host</var>, <var>slottable</var>, in
2214-
<a>tree order</a>:</p>
2235+
<p>Otherwise, for each <a>slottable</a> <a for=tree>child</a> <var>slottable</var> of
2236+
<var>host</var>, in <a>tree order</a>:
22152237

22162238
<ol>
22172239
<li><p>Let <var>foundSlot</var> be the result of <a>finding a slot</a> given
2218-
<var>slottable</var>.</p></li>
2240+
<var>slottable</var>.
22192241

2220-
<li><p>If <var>foundSlot</var> is <var>slot</var>, then append <var>slottable</var> to
2221-
<var>result</var>.</p></li>
2242+
<li><p>If <var>foundSlot</var> is <var>slot</var>, then <a for=list>append</a>
2243+
<var>slottable</var> to <var>result</var>.
22222244
</ol>
22232245
</li>
22242246

@@ -2447,7 +2469,8 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run
24472469
<li><p>Otherwise, <a for=set>insert</a> <var>node</var> into <var>parent</var>'s
24482470
<a for=tree>children</a> before <var>child</var>'s <a for=tree>index</a>.
24492471

2450-
<li><p>If <var>parent</var> is a <a for=Element>shadow host</a> and <var>node</var> is a
2472+
<li><p>If <var>parent</var> is a <a for=Element>shadow host</a> whose <a for=/>shadow root</a>'s
2473+
<a for=ShadowRoot>slot assignment</a> is "<code>named</code>" and <var>node</var> is a
24512474
<a>slottable</a>, then <a>assign a slot</a> for <var>node</var>.
24522475

24532476
<li><p>If <var>parent</var>'s <a for=tree>root</a> is a <a for=/>shadow root</a>, and
@@ -5706,11 +5729,13 @@ invoked, must return a new {{DocumentFragment}} <a>node</a> whose <a for=Node>no
57065729
[Exposed=Window]
57075730
interface ShadowRoot : DocumentFragment {
57085731
readonly attribute ShadowRootMode mode;
5732+
readonly attribute SlotAssignmentMode slotAssignment;
57095733
readonly attribute Element host;
57105734
attribute EventHandler onslotchange;
57115735
};
57125736

57135737
enum ShadowRootMode { "open", "closed" };
5738+
enum SlotAssignmentMode { "manual", "named" };
57145739
</pre>
57155740

57165741
<p>{{ShadowRoot}} <a for=/>nodes</a> are simply known as
@@ -5729,6 +5754,9 @@ It is initially set to false.</p>
57295754
<!-- If we ever change this, e.g., add a ShadowRoot object constructor, that would have serious
57305755
consequences for innerHTML. -->
57315756

5757+
<p><a for=/>Shadow roots</a> have an associated <dfn for=ShadowRoot>slot assignment</dfn>
5758+
("<code>manual</code>" or "<code>named</code>").
5759+
57325760
<p>A <a for=/>shadow root</a>'s <a>get the parent</a> algorithm, given an <var>event</var>, returns
57335761
null if <var>event</var>'s <a>composed flag</a> is unset and <a for=/>shadow root</a> is the
57345762
<a for=tree>root</a> of <var>event</var>'s <a for=Event>path</a>'s first struct's
@@ -5746,6 +5774,9 @@ null if <var>event</var>'s <a>composed flag</a> is unset and <a for=/>shadow roo
57465774
<dfn for=ShadowRoot export><code>onslotchange</code></dfn> <a>event handler</a>, whose
57475775
<a>event handler event type</a> is {{HTMLSlotElement/slotchange}}.
57485776

5777+
<p>The <dfn attribute for=ShadowRoot><code>slotAssignment</code></dfn> getter steps are to return
5778+
<a>this</a>'s <a for=ShadowRoot>slot assignment</a>.
5779+
57495780
<hr>
57505781

57515782
<p>In <dfn export id=concept-shadow-including-tree-order>shadow-including tree order</dfn> is
@@ -5869,6 +5900,7 @@ interface Element : Node {
58695900
dictionary ShadowRootInit {
58705901
required ShadowRootMode mode;
58715902
boolean delegatesFocus = false;
5903+
SlotAssignmentMode slotAssignment = "named";
58725904
};
58735905
</pre>
58745906

@@ -6744,15 +6776,18 @@ invoked, must run these steps:
67446776

67456777
<li><p>Let <var>shadow</var> be a new <a for=/>shadow root</a> whose <a for=Node>node document</a>
67466778
is <a>this</a>'s <a for=Node>node document</a>, <a for=DocumentFragment>host</a> is <a>this</a>,
6747-
and <a for=ShadowRoot>mode</a> is <var>init</var>'s {{ShadowRootInit/mode}}.
6779+
and <a for=ShadowRoot>mode</a> is <var>init</var>["{{ShadowRootInit/mode}}"].
67486780

6749-
<li><p>Set <var>shadow</var>'s <a for=ShadowRoot>delegates focus</a> to <var>init</var>'s
6750-
{{ShadowRootInit/delegatesFocus}}.
6781+
<li><p>Set <var>shadow</var>'s <a for=ShadowRoot>delegates focus</a> to
6782+
<var>init</var>["{{ShadowRootInit/delegatesFocus}}"].
67516783

67526784
<li><p>If <a>this</a>'s <a for=Element>custom element state</a> is "<code>precustomized</code>" or
67536785
"<code>custom</code>", then set <var>shadow</var>'s
67546786
<a for=ShadowRoot>available to element internals</a> to true.
67556787

6788+
<li><p>Set <var>shadow</var>'s <a for=ShadowRoot>slot assignment</a> to
6789+
<var>init</var>["{{ShadowRootInit/slotAssignment}}"].
6790+
67566791
<li><p>Set <a>this</a>'s <a for=Element>shadow root</a> to <var>shadow</var>.
67576792

67586793
<li><p>Return <var>shadow</var>.
@@ -10087,6 +10122,7 @@ Manish Tripathi,
1008710122
Marcos Caceres,
1008810123
Mark Miller,
1008910124
Martijn van der Ven,
10125+
Mason Freed,
1009010126
Mats Palmgren,
1009110127
Mounir Lamouri,
1009210128
Michael Stramel,
@@ -10150,6 +10186,7 @@ Yehuda Katz,
1015010186
Yoav Weiss,
1015110187
Yoichi Osato,
1015210188
Yoshinori Sano,
10189+
Yu Han,
1015310190
Yusuke Abe, and
1015410191
Zack Weinberg
1015510192
for being awesome!

0 commit comments

Comments
 (0)