Skip to content

Commit

Permalink
Add a new <slot> element for shadow trees
Browse files Browse the repository at this point in the history 
This introduces a more formal definition of the slot element than was previously available, building upon the shadow tree concepts added in the DOM Standard.

Fixes #908.
  • Loading branch information
@annevk
annevk committed Apr 20, 2016
1 parent 27aa7bc commit 3c15737
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 1 deletion.
2 changes: 2 additions & 0 deletions images/content-venn.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
94 changes: 93 additions & 1 deletion source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3121,6 +3121,8 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
<li>The <dfn data-noexport="" data-x-href="https://dom.spec.whatwg.org/#document-element">document element</dfn> concept</li>
<li>The <dfn data-noexport="" data-x-href="https://dom.spec.whatwg.org/#in-a-document">in a document</dfn> concept</li>
<li>The <dfn data-noexport="" data-x-href="https://dom.spec.whatwg.org/#in-a-shadow-including-document">in a shadow-including document</dfn> concept</li>
<li>The <dfn data-noexport="" data-x="concept-slot" data-x-href="https://dom.spec.whatwg.org/#concept-slot">slot</dfn> concept, and its <dfn data-noexport="" data-x="slot-name" data-x-href="https://dom.spec.whatwg.org/#slot-name">name</dfn> and <dfn data-noexport="" data-x-href="https://dom.spec.whatwg.org/#slot-assigned-nodes">assigned nodes</dfn></li>
<li>The <dfn data-noexport="" data-x="finding flattened slotables" data-x-href="https://dom.spec.whatwg.org/#find-flattened-slotables">find flattened slotables</dfn> algorithm</li>
<li>The <dfn data-noexport="" data-x-href="https://dom.spec.whatwg.org/#concept-node-pre-insert">pre-insert</dfn>, <dfn data-noexport="" data-x="concept-node-insert" data-x-href="https://dom.spec.whatwg.org/#concept-node-insert">insert</dfn>, <dfn data-noexport="" data-x="concept-node-append" data-x-href="https://dom.spec.whatwg.org/#concept-node-append">append</dfn>, <dfn data-noexport="" data-x="concept-node-replace" data-x-href="https://dom.spec.whatwg.org/#concept-node-replace">replace</dfn>, <dfn data-noexport="" data-x="concept-node-remove" data-x-href="https://dom.spec.whatwg.org/#concept-node-remove">remove</dfn>, and <dfn data-noexport="" data-x="concept-node-adopt" data-x-href="https://dom.spec.whatwg.org/#concept-node-adopt">adopt</dfn> algorithms for nodes</li>
<li>The <dfn data-noexport="" data-x="concept-element-attributes-change" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-change">change</dfn>, <dfn data-noexport="" data-x="concept-element-attributes-append" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-append">append</dfn>, <dfn data-noexport="" data-x="concept-element-attributes-remove" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-remove">remove</dfn>, and <dfn data-noexport="" data-x="concept-element-attributes-replace" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-replace">replace</dfn> algorithms for attributes</li>
<li>The <dfn data-noexport="" data-x="concept-node-insert-ext" data-x-href="https://dom.spec.whatwg.org/#concept-node-insert-ext">insertion steps</dfn>,
Expand Down Expand Up @@ -9945,6 +9947,7 @@ interface <dfn>HTMLUnknownElement</dfn> : <span>HTMLElement</span> { };</pre>
<li><code>script</code></li>
<li><code>section</code></li>
<li><code>select</code></li>
<li><code>slot</code></li>
<li><code>small</code></li>
<li><code>span</code></li>
<li><code>strong</code></li>
Expand Down Expand Up @@ -10056,6 +10059,7 @@ interface <dfn>HTMLUnknownElement</dfn> : <span>HTMLElement</span> { };</pre>
<li><code>samp</code></li>
<li><code>script</code></li>
<li><code>select</code></li>
<li><code>slot</code></li>
<li><code>small</code></li>
<li><code>span</code></li>
<li><code>strong</code></li>
Expand Down Expand Up @@ -59931,7 +59935,68 @@ not-slash = %x0000-002E / %x0030-10FFFF



<!--TOPIC:Canvas-->
<h4 id="the-slot-element">The <dfn><code>slot</code></dfn> element</h4>

<dl class="element">
<dt><span data-x="concept-element-categories">Categories</span>:</dt>
<dd><span>Flow content</span>.</dd>
<dd><span>Phrasing content</span>.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>phrasing content</span> is expected.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd><span>Transparent</span></dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dd><code data-x="attr-slot-name">name</code></dd>
<dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
<dd>
<pre class="idl">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);
};

dictionary <dfn>AssignedNodesOptions</dfn> {
boolean flatten = false;
};</pre>
</dd>
</dl>

<p>The <code>slot</code> element defines a <span data-x="concept-slot">slot</span>. It is
typically used in a <span>shadow tree</span>. A <code>slot</code> element <span>represents</span>
its <span>assigned nodes</span>, if any, and its contents otherwise.</p>

<p>The <dfn data-x="attr-slot-name"><code>name</code></dfn> content attribute may contain any
string value. It represents a <span data-x="concept-slot">slot</span>'s <span
data-x="slot-name">name</span>.</p>

<dl class="domintro">
<dt><var>slot</var> . <code subdfn data-x="dom-slot-name">name</code></dt>
<dd>Can be used to get and set <var>slot</var>'s <span data-x="slot-name">name</span>.</dd>

<dt><var>slot</var> . <code subdfn data-x="dom-slot-assignedNodes">assignedNodes</code>()</dt>
<dd>Returns <var>slot</var>'s <span>assigned nodes</span>.</dd>

<dt><var>slot</var> . <code data-x="dom-slot-assignedNodes">assignedNodes</code>({ flatten: true })</dt>
<dd>Returns <var>slot</var>'s <span>assigned nodes</span>, if any, and <var>slot</var>'s children
otherwise, and does the same for any <code>slot</code> elements encountered therein, recursively,
until there are no <code>slot</code> elements left.</dd>
</dl>

<p>The <dfn data-x="dom-slot-name"><code>name</code></dfn> IDL attribute must <span>reflect</span>
the content attribute of the same name.</p>

<p>The <dfn data-x="dom-slot-assignedNodes"><code>assignedNodes(<var>options</var>)</code></dfn>
method, when invoked, must run these steps:</p>

<ol>
<li><p>If the value of <var>options</var>'s <code data-x="">flatten</code> member is false, then
return this element's <span>assigned nodes</span>.</p></li>

<li><p>Return the result of <span>finding flattened slotables</span> with this element.</p></li>
</ol>



<h4>The <dfn id="canvas"><code>canvas</code></dfn> element</h4>

<dl class="element">
Expand Down Expand Up @@ -109376,6 +109441,10 @@ dialog::backdrop {
margin: 1em;
}
}

slot {
display: contents;
}
</pre>

<p>The following rules are also expected to apply, as <span>presentational hints</span>:</p>
Expand Down Expand Up @@ -115380,6 +115449,18 @@ if (s = prompt('What is your name?')) {
<td><code>HTMLSelectElement</code></td>
</tr>

<tr>
<th><code>slot</code></th>
<td>Shadow tree slot</td>
<td><span data-x="Flow content">flow</span>;
<span data-x="Phrasing content">phrasing</span></td>
<td><span data-x="Phrasing content">phrasing</span></td>
<td><span>transparent</span></td>
<td><span data-x="global attributes">globals</span>;
<code data-x="attr-slot-name">name</code></td>
<td><code>HTMLSlotElement</code></td>
</tr>

<tr>
<th><code>small</code></th>
<td>Side comment</td>
Expand Down Expand Up @@ -115897,6 +115978,7 @@ if (s = prompt('What is your name?')) {
<code>script</code>;
<code>section</code>;
<code>select</code>;
<code>slot</code>;
<code>small</code>;
<code>span</code>;
<code>strong</code>;
Expand Down Expand Up @@ -115986,6 +116068,7 @@ if (s = prompt('What is your name?')) {
<code>samp</code>;
<code>script</code>;
<code>select</code>;
<code>slot</code>;
<code>small</code>;
<code>span</code>;
<code>strong</code>;
Expand Down Expand Up @@ -116809,6 +116892,11 @@ if (s = prompt('What is your name?')) {
<td> <code data-x="attr-param-name">param</code>
<td> Name of parameter
<td> <a href="#attribute-text">Text</a>
<tr>
<th> <code data-x="">name</code>
<td> <code data-x="attr-slot-name">slot</code>
<td> Name of shadow tree slot
<td> <a href="#attribute-text">Text</a>
<tr>
<th> <code data-x="">nonce</code>
<td> <code data-x="attr-script-nonce">script</code>;
Expand Down Expand Up @@ -118087,6 +118175,10 @@ if (s = prompt('What is your name?')) {
<td> <code>select</code>
<td> <code>HTMLSelectElement</code> : <code>HTMLElement</code>

<tr>
<td> <code>slot</code>
<td> <code>HTMLSlotElement</code> : <code>HTMLElement</code>

<tr>
<td> <code>small</code>
<td> <code>HTMLElement</code>
Expand Down

0 comments on commit 3c15737

Please sign in to comment.