diff --git a/source b/source index 07296f7c4ae..454e418abf9 100644 --- a/source +++ b/source @@ -3190,7 +3190,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • node document concept
  • document type concept
  • host concept
    • -
  • The shadow root concept, and its delegates focus, available to element internals, clonable, serializable, custom element registry, and keep custom element registry null.
    • +
  • The shadow root concept, and its delegates focus, available to element internals, clonable, serializable, custom element registry, keep custom element registry null, and reference target.
  • The shadow host concept
  • HTMLCollection interface, its length attribute, and its @@ -5206,6 +5206,248 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute +

    Element reference attributes

    + +

    Element reference + attributes refer to one or more Elements in the document. When specified as content + attributes, element reference attributes refer + to other Elements via their IDs.

    + +

    The steps to resolve the reference + target on an element element are:

    + +
      +

    1. If element does not have a shadow root, or element's + shadow root's reference target is null, return element.

      +
      2. + +

    2. Let referenceTargetValue be the value of element's shadow + root's reference target.

      3. + +

    3. Let candidate be the first element in element's shadow + root whose ID matches + referenceTargetValue.

      +
      4. + +

    4. If no such element exists, return null.

      5. + +

    5. Return the result of resolving the reference + target on candidate. +

      6. +
    + +
    Single element references
    + +

    A single element reference attribute represents a reference to a single element. + When specified as a content attribute, a single element reference consists of a + single token which should completely match the ID of another + element in the document.

    + +

    A single element reference attribute attr on an element X + refers to an element Y + if Y is the attr-associated + element for X.

    + +

    The rules to get the + attr-associated element for a single element reference attribute + attr and element element, optionally given a boolean retarget + (default false), are:

    + +
      +

    1. If the attribute is not specified on element, return null.

      2. + +
    2. +

      If element has an explicitly-set + attr-element which is not null:

      + +
        +

      1. If element's explicitly-set + attr-element is a descendant of any of element's + shadow-including ancestors, then let + candidate be element's + explicitly-set attr-element.

        +
        2. + +

      2. Otherwise, let candidate be null.

        3. +
      + +

      An element will only have an + explicitly-set attr-element if it has + an IDL attribute with a type derived from Element which + reflects attr.

      +
      3. + +
    3. +

      Otherwise:

      + +
        +

      1. Let value be the attribute value.

        2. + +

      2. Let candidate be the first element in element's tree, + in tree order whose ID is value. If no + such element exists, let candidate be null.

        +
        3. +
      +
      4. + +

    4. If candidate is null, return null.

      5. + +

    5. Let resolvedCandidate be the result of resolving the reference target on + candidate.

      6. + +

    6. If retarget is true, and resolvedCandidate is not null, return + candidate.

      7. + +

    7. Return resolvedCandidate

      .
      8. +
    + +
    +

    A label element can use the for attribute to + create an association with an input element:

    + + 
    <label for="name">Name:</label>
+<input id="name">
    + +

    In this example, the input element is the + for-associated element for the label + element.

    + +

    An element with a shadow root may use a reference target to allow + attr-association to be created with an element inside of its shadow root: + + 

    <label for="name">Name:</label>
+<fancy-input id="name">
+ <template shadowrootmode="closed"
+           shadowrootreferencetarget="real-input">
+  <input id="real-input">
+ </template>
+</fancy-input>
+
    + +

    In this second example, the input inside of the shadow root is the + for-associated element.

    +
    + +
    Sets of element references
    + +

    A set of element references attribute represents + a set of references to elements. When specified as a content attribute, a set of element + references consists of a set of space-separated tokens, each of which should + completely match the ID of another element in the document.

    + +

    An unordered set of unique element + references is a set of element references where none of the element references + is repeated.

    + +

    An ordered set of unique element + references is a set of element references where none of the element references + is repeated, and the order of the elements is meaningful.

    + +

    A set of element references attribute attr on an element X + refers to an element Y + if Y is one of the + attr-associated elements for + X.

    + +

    The rules to get the attr-associated elements for a set of + element references attribute attr and element element, optionally + given a boolean retarget (default false), are:

    + +
      +

    1. If the attribute is not specified on element, return null.

      2. + +

    2. Let candidates be an empty list.

      3. + +
    3. +

      If element has an explicitly set attr-elements which + +

        +
      1. +

        For each attrElement in + element's explicitly set attr-elements:

        + +
          +

        1. If attrElement is not a descendant of any of + element's shadow-including + ancestors, then continue.

          2. + +

        2. Append attrElement to + candidates.

          3. +
        +
        2. +
      + +

      An element will only have + explicitly-set attr-elements if it + has an IDL attribute with type FrozenArray<T>?, where T is either + Element or an interface that inherits from Element, which + reflects attr.

      +
      4. + +
    4. +

      Otherwise:

      + +
        +

      1. Let value be the attribute value.

        2. + +

      2. Let tokens be value, split on ASCII whitespace. + +

      3. +

        For each id of tokens:

        + +
          +
        1. +

          Let candidate be the first element, in tree order, that meets + the following criteria:

          + +
            +

          • candidate's root is the same as element's + root; and

            • + +

          • candidate's ID is id.

            +
            • +
          + +

          If no such element exists, then continue.

          +
          2. + +

        2. Append candidate to + candidates.

          3. +
        +
        4. +
      +
      5. + +

    5. Let resolvedCandidates be an empty list.

      6. + +
    6. +

      For each candidate in candidates: +

      + +
        +

      1. Let resolvedCandidate be the result of + resolving the reference target on + candidate.

        2. + +

      2. If resolvedCandidate is not null:

        +
          +

        1. If retarget is true, append candidate to + resolvedCandidates.

          2. +

        2. Otherwise, append resolvedCandidate to + resolvedCandidates.

          3. +
        +
        3. +
      +
      7. + +

    7. Return resolvedCandidates.

      8. +

    Numbers

    @@ -8516,66 +8758,25 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute -

    If a reflected IDL attribute has the type T?, - where T is either Element or an interface that inherits from - Element, then with attr being the reflected content attribute - name:

    +

    If a reflected IDL attribute has the type Element, then with + attr being the reflected content attribute name:

    If specified, the popovertarget attribute value must - be the ID of an element with a popover attribute in the same tree as the button with the popovertarget attribute.

    + be a valid single element reference attribute + referring to an element with the popover attribute.

    The popovertargetaction attribute is an enumerated attribute with the following keywords and states:

    @@ -132449,6 +132592,10 @@ document.body.appendChild(text); data-x="attr-template-shadowrootdelegatesfocus">shadowrootdelegatesfocus attribute; otherwise false.

    • +

  • Let referenceTarget be the value of templateStartTag's + shadowrootreferencetarget + attribute if it has one; otherwise null.

    • +

  • If declarativeShadowHostElement is a shadow host, then insert an element at the adjusted insertion location with template.

    • @@ -132467,8 +132614,8 @@ document.body.appendChild(text);

  • Attach a shadow root with declarativeShadowHostElement, mode, clonable, - serializable, delegatesFocus, "named", and - registry.

    + serializable, delegatesFocus, "named", + referenceTarget, and registry.

    If an exception is thrown, then catch it and:

    @@ -136210,6 +136357,18 @@ document.body.appendChild(text); data-x="shadow-root-custom-element-registry">custom element registry, then append " shadowrootcustomelementregistry=""".

    • +
  • +

    If shadow's reference target is set, then:

    + +
      +

    1. Append " shadowrootreferencetarget="".

      2. + +

    2. Append shadow's reference target.

      3. + +

    3. Append """.

      4. +
    +
    • +

  • Append ">".

  • Append the value of running the HTML fragment serialization algorithm with @@ -144678,7 +144837,7 @@ interface External { for output Specifies controls from which the output was calculated - Unordered set of unique space-separated tokens consisting of IDs* + Unordered set of unique element references form button; @@ -144728,7 +144887,7 @@ interface External { td; th The header cells for this cell - Unordered set of unique space-separated tokens consisting of IDs* + Unordered set of unique element references* height canvas; @@ -144846,7 +145005,7 @@ interface External { itemref HTML elements Referenced elements - Unordered set of unique space-separated tokens consisting of IDs* + Unordered set of unique element references itemscope HTML elements @@ -145202,6 +145361,11 @@ interface External { Enables streaming declarative shadow roots "open"; "closed" + + shadowrootreferencetarget + template + Sets reference target on a declarative shadow root + ID or null shadowrootserializable template