<slot> WIP

whatwg · Mar 22, 2016 · b7d3251 · b7d3251
1 parent 36c9938
commit b7d3251
Showing 1 changed file with 64 additions and 1 deletion.
diff --git a/source b/source
@@ -9682,6 +9682,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>
@@ -9792,6 +9793,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>
@@ -10016,6 +10018,7 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0
   <!-- when updating this also update the category index -->
   <ul class="brief category-list">
    <li><code>script</code></li>
+   <li><code>slot</code></li>
    <li><code>template</code></li>
   </ul>
 
@@ -59637,7 +59640,44 @@ 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>
+   <dd><span data-x="script-supporting elements">Script-supporting element</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>
+   <dd>Where <span>script-supporting elements</span> are 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> {
+  attribute DOMString <span data-x="dom-slot-name">name</span>;
+  <!-- https://github.com/w3c/webcomponents/issues/451 -->
+};</pre>
+   </dd>
+  </dl>
+
+  <p>The <code>slot</code> element, when used in a <span>shadow tree</span>, defines a <span
+  data-x="concept-slot">slot</span>. When used outside a <span>shadow tree</span>, it represents
+  nothing.</p>
+
+  <p>The <dfn data-x="attr-slot-name"><code>name</code></dfn> content attribute may contain any
+  string value. It is used in conjunction with the <code data-x="attr-slot">slot</code> attribute in
+  the <span>light tree</span> to determine which <span data-x="concept-slotable">slotables</span>
+  end up being found by the <code>slot</code> element.</p>
+
+  <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>
+
+
+
   <h4>The <dfn id="canvas"><code>canvas</code></dfn> element</h4>
 
   <dl class="element">
@@ -113291,6 +113331,20 @@ 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>;
+         <span data-x="Script-supporting elements">script-supporting</span></td>
+     <td><span data-x="Phrasing content">phrasing</span>;
+         <span data-x="Script-supporting elements">script-supporting</span></td>
+     <td><span>transparent</span></td>
+     <td><span data-x="global attributes">globals</span>;
+         <code data-x="attr-slot-name">name</code>
+     <td><code>HTMLSlotElement</code></td>
+    </tr>
+
     <tr>
      <th><code>small</code></th>
      <td>Side comment</td>
@@ -114699,6 +114753,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 slot
+     <td> <a href="#attribute-text">Text</a>
     <tr>
      <th> <code data-x="">nonce</code>
      <td> <code data-x="attr-script-nonce">script</code>;
@@ -115973,6 +116032,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>