Skip to content
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

Add Imperative Slot API #5483

Closed
wants to merge 15 commits into from
Closed

Add Imperative Slot API #5483

Changes from 5 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f3f5266
Add Imperative Slot API
Apr 22, 2020
91e0d05
Update Imperative Slot API based on feedback.
Apr 24, 2020
1f10e68
Updates to include manuallyAssignedNodes.
May 14, 2020
1c673df
Update Imperative Slot API html spec.
Jun 5, 2020
a705c37
Update Imperative Slot API spec.
Jun 17, 2020
d30c8f1
Update Imperative Slot API html spec
Oct 16, 2020
854a6b0
Merge remote-tracking branch 'upstream/master'
Oct 16, 2020
b39abb7
Correct syntax errors
Oct 16, 2020
981de6d
Update Imperative Slot API html spec
Nov 12, 2020
ab78ff5
Merge remote-tracking branch 'upstream/master'
Nov 12, 2020
551f474
Merge remote-tracking branch 'upstream/master'
Dec 31, 2020
bbb886a
Update HTML spec for imperative slot API
Dec 31, 2020
174469b
Update Imperative Slot API html spec
Dec 31, 2020
127bb89
Tidy up a bit
domenic Feb 23, 2021
fdc36ca
Handle duplicates and go back to a set
domenic Feb 23, 2021
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
35 changes: 35 additions & 0 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2931,6 +2931,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#in-a-document-tree">in a document tree</dfn>, <dfn data-x-href="https://dom.spec.whatwg.org/#in-a-document">in a document</dfn> (legacy), and <dfn data-x-href="https://dom.spec.whatwg.org/#connected">connected</dfn> concepts</li>
<li>The <dfn data-x="concept-slot" data-x-href="https://dom.spec.whatwg.org/#concept-slot">slot</dfn> concept, and its <dfn data-x="slot-name" data-x-href="https://dom.spec.whatwg.org/#slot-name">name</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#slot-assigned-nodes">assigned nodes</dfn></li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#slotable-assigned-slot">assigned slot</dfn> concept.
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#dom-shadowroot-slot-assignment">slot assignment</dfn> concept.
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-slotable">slottable</dfn> concept.
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#assign-slotables-for-a-tree">assign slottables for a tree</dfn> concept.
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant">inclusive descendants</dfn> concept.
<li>The <dfn data-x="finding flattened slottables" data-x-href="https://dom.spec.whatwg.org/#find-flattened-slotables">find flattened slottables</dfn> algorithm</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#assign-a-slot">assign a slot</dfn> algorithm</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-node-pre-insert">pre-insert</dfn>, <dfn data-x="concept-node-insert" data-x-href="https://dom.spec.whatwg.org/#concept-node-insert">insert</dfn>, <dfn data-x="concept-node-append" data-x-href="https://dom.spec.whatwg.org/#concept-node-append">append</dfn>, <dfn data-x="concept-node-replace" data-x-href="https://dom.spec.whatwg.org/#concept-node-replace">replace</dfn>, <dfn data-x="concept-node-replace-all" data-x-href="https://dom.spec.whatwg.org/#concept-node-replace-all">replace all</dfn>, <dfn data-x-href="https://dom.spec.whatwg.org/#string-replace-all">string replace all</dfn>, <dfn data-x="concept-node-remove" data-x-href="https://dom.spec.whatwg.org/#concept-node-remove">remove</dfn>, and <dfn data-x="concept-node-adopt" data-x-href="https://dom.spec.whatwg.org/#concept-node-adopt">adopt</dfn> algorithms for nodes</li>
Expand Down Expand Up @@ -58481,6 +58485,7 @@ interface <dfn>HTMLSlotElement</dfn> : <span>HTMLElement</span> {
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-slot-name">name</span>;
sequence&lt;Node> <span data-x="dom-slot-assignedNodes">assignedNodes</span>(optional <span>AssignedNodesOptions</span> options = {});
sequence&lt;Element> <span data-x="dom-slot-assignedElements">assignedElements</span>(optional <span>AssignedNodesOptions</span> options = {});
void <span data-x="dom-slot-assign">assign</span>((<span>Element</span> or <code>Text</code>)... nodes);
};

dictionary <dfn>AssignedNodesOptions</dfn> {
Expand Down Expand Up @@ -58526,6 +58531,12 @@ dictionary <dfn>AssignedNodesOptions</dfn> {
<dt><var>slot</var> . <code data-x="dom-slot-assignedElements">assignedElements</code>({ flatten: true })</dt>
<dd>Returns the same as <code data-x="dom-slot-assignedNodes">assignedNodes({ flatten: true
})</code>, limited to elements.</dd>

<dt><var>slot</var> . <code data-x="dom-slot-assign">assign</code>(nodes)</dt>
<dd>Set the list of nodes as <code data-x="dom-slot-assignedNodes">assignedNodes</code>.
<p>Throws a <span>"<code>NotAllowedError</code>"</span> <code>DOMException</code>
if <span>slot</span>'s <span>shadow root</span> is not "manual" <span>slot assignment</span>
or nodes are not <span>slottable</span> children of its <span>shadow host</span>.</dd>
</dl>

<p>The <dfn data-x="dom-slot-name"><code>name</code></dfn> IDL attribute must <span>reflect</span>
Expand Down Expand Up @@ -58553,6 +58564,29 @@ dictionary <dfn>AssignedNodesOptions</dfn> {
to contain only <code>Element</code> nodes.</p></li>
</ol>

<p>The <code>slot</code> element has a <dfn data-dfn-for="HTMLSlotElement" data-export="">manually assigned nodes</dfn>,
which is a list of <span>slottable</span>s set by <code data-x="dom-slot-assign">assign(<var>nodes</var>)</code>.</p>
yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved

<p>The <dfn data-x="dom-slot-assign"><code>assign(<var>nodes</var>)</code></dfn> method,
when invoked, must run these steps:</p>
yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved
yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved

<ol>
<li><p>If <span>this</span> <span>root</span> is not a <span>shadow root</span> or its <span>slot assignment</span>
yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved
yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved
is not "manual", then throw <span>"<code>NotAllowedError</code>"</span> <code>DOMException</code>.</p></li>
yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved
yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved

<li><p>For each <var>node</var> in <var>nodes</var>: if <var>node</var> is not a <span data-x="concept-tree-child">child</span>
of <span>this</span> <span>root</span>'s <span>shadow host</span>, then throw <span>"<code>NotAllowedError</code>"</span>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens if I change this after assignment? Per the current set of algorithms it seems like it would still be assigned, despite no longer being a child of the host. Is that correct?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right. The algorithms in corresponding DOM spec PR doesn't update manually assigned nodes when an assigned node or a slot is removed.

I looked at the #concept-node-remove to see how when "slot assignment' auto is handled.
Step 11 and 12 takes care of the assigned node case[1]. And step 14 takes care of the case[2] if the removed node is a slot or it contains a slot descendant.

So in theory, when "slot assignment" manual, it can use the same algorithm to make sure that slottables at the 3 of #assign-slotables are set back to manually assigned nodes. Thus, I updated the corresponding DOM spec to keep slot's assigned nodes and manually assigned nodes in sync.

Hopefully, this works. I also looked at the possibility of clearing out the manually assigned nodes during #concept-node-remove, but decided to go with a similar path for auto assignment.

yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved
<code>DOMException</code>.</p></li>
yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved

domenic marked this conversation as resolved.
Show resolved Hide resolved
<li><p>For each <var>node</var> in <var>nodes</var>, remove <var>node</var> from the
yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved
<span>manually assigned nodes</span> of each <span>slot</span> in this <span>shadow root</span>’s
yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved
<span>inclusive descendants</span>, if it exists.

<li><p>Set <span>this</span> <span>manually assigned nodes</span> to <var>nodes</var>.</p></li>

yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved
<li><p>Run <span>assign slottables for a tree</span> for <b>this</b>.</p></li>
yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved
</ol>

yuzhe-han marked this conversation as resolved.
Show resolved Hide resolved


<h4 split-filename="canvas">The <dfn id="canvas"><code>canvas</code></dfn> element</h4>
Expand Down Expand Up @@ -121655,6 +121689,7 @@ INSERT INTERFACES HERE
Yngve Nysaeter Pettersen,
Yoav Weiss,
Yonathan Randolph,
Yu Han, <!-- yuzhe-han on GitHub -->
Yury Delendik,
平野裕 (Yutaka Hirano),
Yuzo Fujishima,
Expand Down