diff --git a/images/content-venn.svg b/images/content-venn.svg index 718cb439fb2..82cdc035786 100644 --- a/images/content-venn.svg +++ b/images/content-venn.svg @@ -92,6 +92,7 @@
  • script
  • section
  • select
    • +
  • slot
  • small
  • span
  • strong
    • @@ -244,6 +245,7 @@
  • samp
  • script
  • select
    • +
  • slot
  • small
  • span
  • strong
    • diff --git a/source b/source index c443b93805c..e32cd269fa6 100644 --- a/source +++ b/source @@ -3121,6 +3121,8 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
  • The document element concept
  • The in a document concept
  • The in a shadow-including document concept
    • +
  • The slot concept, and its name and assigned nodes
    • +
  • The find flattened slotables algorithm
  • The pre-insert, insert, append, replace, remove, and adopt algorithms for nodes
  • The change, append, remove, and replace algorithms for attributes
  • The insertion steps, @@ -9945,6 +9947,7 @@ interface HTMLUnknownElement : HTMLElement { };
  • script
  • section
  • select
    • +
  • slot
  • small
  • span
  • strong
    • @@ -10056,6 +10059,7 @@ interface HTMLUnknownElement : HTMLElement { };
  • samp
  • script
  • select
    • +
  • slot
  • small
  • span
  • strong
    • @@ -59931,7 +59935,68 @@ not-slash = %x0000-002E / %x0030-10FFFF - +

    The slot element

    + +
    +
    Categories:
    +
    Flow content.
    +
    Phrasing content.
    +
    Contexts in which this element can be used:
    +
    Where phrasing content is expected.
    +
    Content model:
    +
    Transparent
    +
    Content attributes:
    +
    Global attributes
    +
    name
    +
    DOM interface:
    +
    +
    interface HTMLSlotElement : HTMLElement {
+  [CEReactions] attribute DOMString name;
+  sequence<Node> assignedNodes(optional AssignedNodesOptions options);
+};
+
+dictionary AssignedNodesOptions {
+  boolean flatten = false;
+};
    +
    +
    + +

    The slot element defines a slot. It is + typically used in a shadow tree. A slot element represents + its assigned nodes, if any, and its contents otherwise.

    + +

    The name content attribute may contain any + string value. It represents a slot's name.

    + +
    +
    slot . name
    +
    Can be used to get and set slot's name.
    + +
    slot . assignedNodes()
    +
    Returns slot's assigned nodes.
    + +
    slot . assignedNodes({ flatten: true })
    +
    Returns slot's assigned nodes, if any, and slot's children + otherwise, and does the same for any slot elements encountered therein, recursively, + until there are no slot elements left.
    +
    + +

    The name IDL attribute must reflect + the content attribute of the same name.

    + +

    The assignedNodes(options) + method, when invoked, must run these steps:

    + +
      +

    1. If the value of options's flatten member is false, then + return this element's assigned nodes.

      2. + +

    2. Return the result of finding flattened slotables with this element.

      3. +
    + + +

    The canvas element

    @@ -109376,6 +109441,10 @@ dialog::backdrop { margin: 1em; } } + +slot { + display: contents; +}

    The following rules are also expected to apply, as presentational hints:

    @@ -115380,6 +115449,18 @@ if (s = prompt('What is your name?')) { HTMLSelectElement + + slot + Shadow tree slot + flow; + phrasing + phrasing + transparent + globals; + name + HTMLSlotElement + + small Side comment @@ -115897,6 +115978,7 @@ if (s = prompt('What is your name?')) { script; section; select; + slot; small; span; strong; @@ -115986,6 +116068,7 @@ if (s = prompt('What is your name?')) { samp; script; select; + slot; small; span; strong; @@ -116809,6 +116892,11 @@ if (s = prompt('What is your name?')) { param Name of parameter Text + + name + slot + Name of shadow tree slot + Text nonce script; @@ -118087,6 +118175,10 @@ if (s = prompt('What is your name?')) { select HTMLSelectElement : HTMLElement + + slot + HTMLSlotElement : HTMLElement + small HTMLElement