From c88bbf7a3d7b6d7373c8c11f7f53e90cb94c7169 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Mon, 5 Jun 2023 20:10:56 -0400 Subject: [PATCH 01/13] Add name attribute for grouping details elements into an exclusive accordion. --- source | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 58 insertions(+), 3 deletions(-) diff --git a/source b/source index 328fbab5a43..2e77450b99f 100644 --- a/source +++ b/source @@ -59454,6 +59454,7 @@ dictionary FormDataEventInit : EventInit {
One summary element followed by flow content.
Content attributes:
Global attributes
+
name
open
Accessibility considerations:
@@ -59465,6 +59466,7 @@ dictionary FormDataEventInit : EventInit { interface HTMLDetailsElement : HTMLElement { [HTMLConstructor] constructor(); + [CEReactions] attribute boolean name; [CEReactions] attribute boolean open; }; @@ -59485,6 +59487,11 @@ interface HTMLDetailsElement : HTMLElement {

The rest of the element's contents represents the additional information or controls.

+

The name content + attribute gives the name of the group of related details elements that the element is + a member of. Opening one member of this group causes other members of the group to close. If the + attribute is specified, its value must not be the empty string.

+

The open content attribute is a boolean attribute. If present, it indicates that both the summary and the additional information is to be shown to the user. If the attribute is absent, only the @@ -59532,9 +59539,51 @@ interface HTMLDetailsElement : HTMLElement { data-x="event-toggle">toggle at the details element.

-

The open - IDL attribute must reflect the open content - attribute.

+

The details name group that contains a details element + a also contains all the other details elements b that fulfill + all of the following conditions:

+ + + +

Whenever the open attribute is added to a + details element that has a name attribute + that is not empty, the user agent must run the following steps, which are known as the + details group closing steps, for this details element:

+ +
    +
  1. +

    Let group members be a list of elements, containing all elements in this + details element's details name group except for this details + element, in tree order.

    + +

    This is done because mutation events could be run during this algorithm, and the + mutation event listeners could change the members of the details name group or the + tree order. +

    2. + +
  2. +

    For each element otherElement in group members, in order:

    +
      +

    1. If the open attribute is set on + otherElement, remove the open attribute on + otherElement. +

    +
    3. +
+ +

The name + and open + IDL attributes must reflect the respective content attributes of the same name.

@@ -129304,6 +129353,7 @@ interface External { summary*; flow globals; + name open HTMLDetailsElement @@ -131575,6 +131625,11 @@ interface External { form-associated custom elements Name of the element to use for form submission and in the form.elements API Text* + + name + details + Name of group of mutually-exclusive details elements + Text* name form From 8639043250542e0d7188703aeb893e44402d2c2f Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Mon, 12 Jun 2023 11:46:31 -0400 Subject: [PATCH 02/13] Address style/markup/typo review comments (many of which were suggestions). --- source | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/source b/source index 2e77450b99f..f52c41795a8 100644 --- a/source +++ b/source @@ -59466,7 +59466,7 @@ dictionary FormDataEventInit : EventInit { interface HTMLDetailsElement : HTMLElement { [HTMLConstructor] constructor(); - [CEReactions] attribute boolean name; + [CEReactions] attribute DOMString name; [CEReactions] attribute boolean open; }; @@ -59489,7 +59489,7 @@ interface HTMLDetailsElement : HTMLElement {

The name content attribute gives the name of the group of related details elements that the element is - a member of. Opening one member of this group causes other members of the group to close. If the + a member of. Opening one member of this group causes other members of the group to close. If the attribute is specified, its value must not be the empty string.

The open content @@ -59539,9 +59539,9 @@ interface HTMLDetailsElement : HTMLElement { data-x="event-toggle">toggle at the details element.

-

The details name group that contains a details element - a also contains all the other details elements b that fulfill - all of the following conditions:

+

The details name group that contains a details element a + also contains all the other details elements b that fulfill all of the + following conditions:

-

Whenever the open attribute is added to a - details element that has a name attribute - that is not empty, the user agent must run the following steps, which are known as the - details group closing steps, for this details element:

+

The following attribute change + steps, given element, localName, oldValue, + value, and namespace, are used for all details elements:

    +

  1. If namespace is not null, then return.

    2. + +

  2. If localName is not open, then + return.

    3. +
  3. -

    Let group members be a list of elements, containing all elements in this - details element's details name group except for this details - element, in tree order.

    +

    If one of oldValue or value is null, then queue an element + task on the DOM manipulation task source given the details + element that runs the following steps, which are known as the details notification task + steps, for element:

    -

    This is done because mutation events could be run during this algorithm, and the - mutation event listeners could change the members of the details name group or the - tree order. +

      +
    1. +

      If another task has been queued to run the details notification task steps for + element, then return.

      + +

      When the open attribute is toggled + several times in succession, these steps essentially get coalesced so that only one event is + fired.

      +
      2. + +

    2. Fire an event named toggle at element.

      3. +
  4. -

    For each element otherElement of group - members:

    +

    If oldValue is null, and element that has a name attribute that is not empty, then:

    +
      -

    1. If the open attribute is set on - otherElement, remove the open attribute on - otherElement. +

    2. +

      Let group members be a list of elements, containing all elements in + element's details name group except for element, in tree + order.

      + +

      This is done because mutation events could be run during this algorithm, and + the mutation event listeners could change the members of the details name group or the + tree order. +

      3. + +
    3. +

      For each element otherElement of group + members:

      +
        +

      1. If the open attribute is set on + otherElement, remove the open attribute on + otherElement. +

      +
From 51471c934a259363e8c483ca0784634d23cc6509 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Tue, 13 Jun 2023 06:22:51 -0700 Subject: [PATCH 04/13] Add exclusive accordion example. --- source | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/source b/source index dfca907d898..f603d2d3866 100644 --- a/source +++ b/source @@ -59673,6 +59673,32 @@ interface HTMLDetailsElement : HTMLElement { +
+ +

The following example shows the name attribute of the + details element being used to create an exclusive accordion, a set of + details elements where a user action to open one details element causes + any open details to close.

+ + 
<section class="characteristics">
+ <details name="frame-characteristics">
+  <summary>Material</summary>
+  The picture frame is made of solid oak wood.
+ </details>
+ <details name="frame-characteristics">
+  <summary>Size</summary>
+  The picture frame fits a photo 40cm tall and 30cm wide.
+  The frame is 45cm tall, 35cm wide, and 2cm thick.
+ </details>
+ <details name="frame-characteristics">
+  <summary>Color</summary>
+  The picture frame is available in its natural wood
+  color, or with black stain.
+ </details>
+</section>
+ +
+

Because the open attribute is added and removed From 40c8996676d15c2919d46a5016873cb147136c6e Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Fri, 16 Jun 2023 16:22:45 -0400 Subject: [PATCH 05/13] Address the straightforward comments from the new round of review. --- source | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/source b/source index f603d2d3866..3122480e60c 100644 --- a/source +++ b/source @@ -59545,10 +59545,10 @@ interface HTMLDetailsElement : HTMLElement { return.

  • -

    If one of oldValue or value is null, then queue an element - task on the DOM manipulation task source given the details - element that runs the following steps, which are known as the details notification task - steps, for element:

    +

    If one of oldValue or value is null and the other is not null, then + queue an element task on the DOM manipulation task source given the + details element that runs the following steps, which are known as the details + notification task steps, for element:

    1. @@ -59567,27 +59567,27 @@ interface HTMLDetailsElement : HTMLElement {
    2. -

      If oldValue is null, and element that has a name attribute that is not empty, then:

      +

      If oldValue is null, value is not null, and element has a + name attribute that is not empty, then:

      1. -

        Let group members be a list of elements, containing all elements in - element's details name group except for element, in tree - order.

        +

        Let groupMembers be a list of elements, containing all elements in + element's details name group except for element, in + tree order.

        This is done because mutation events could be run during this algorithm, and - the mutation event listeners could change the members of the details name group or the - tree order. + the mutation event listeners could change the members of the details name group + or the tree order.

      2. -

        For each element otherElement of group - members:

        +

        For each element otherElement of + groupMembers:

        1. If the open attribute is set on - otherElement, remove the open attribute on - otherElement. + otherElement, remove the + open attribute on otherElement.

      From 5134538b7ddd721240ce975df39681ffdcee798d Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Fri, 30 Jun 2023 13:16:52 -0400 Subject: [PATCH 06/13] Address review comments from @annevk. --- source | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/source b/source index 3122480e60c..4b36a2b5ed1 100644 --- a/source +++ b/source @@ -59523,15 +59523,13 @@ interface HTMLDetailsElement : HTMLElement { following conditions:

        -
      • Both a and b are in the same tree, and the root of that tree is a Document or a ShadowRoot.
      • They both have a name attribute, their name attributes are not empty, and the value of a's - name attribute equals the value of b's name attribute.
        • - + data-x="attr-details-name">name attributes are not the empty string, and the value of + a's name attribute equals the value of + b's name attribute.

      The following attribute change @@ -59674,7 +59672,6 @@ interface HTMLDetailsElement : HTMLElement {

    • -

    The following example shows the name attribute of the details element being used to create an exclusive accordion, a set of details elements where a user action to open one details element causes @@ -59696,7 +59693,6 @@ interface HTMLDetailsElement : HTMLElement { color, or with black stain. </details> </section> -

    From 8d04f03981e1eaceb762b88dbecabedf73046eaf Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Fri, 28 Jul 2023 10:10:24 -0400 Subject: [PATCH 07/13] Add author conformance requirements. --- source | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/source b/source index 4b36a2b5ed1..197c5f7cfa1 100644 --- a/source +++ b/source @@ -59492,6 +59492,20 @@ interface HTMLDetailsElement : HTMLElement { a member of. Opening one member of this group causes other members of the group to close. If the attribute is specified, its value must not be the empty string.

    +

    A document must not contain more than one details element in the same + details name group that has the open + attribute present. Authors must not use script to add details elements to a document + in a way that would cause a details name group to have more than one + details element with the open attribute + present.

    + +

    The group of elements that is created by a common name attribute is intended to be exclusive, meaning that at most + one of the details elements can be open at once. This exclusivity is enforced by + user agents only when a details element is opened, and is not enforced by user agents + when parsing or when inserting elements into the DOM tree. This is why there are also + requirements on authors to ensure that the exclusivity is correct.

    +

    The open content attribute is a boolean attribute. If present, it indicates that both the summary and the additional information is to be shown to the user. If the attribute is absent, only the From 9b767879bb41a886c6c8240308b4b091bc0237fb Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Tue, 1 Aug 2023 14:28:07 -0400 Subject: [PATCH 08/13] Enforce exclusivity in disconnected subtrees. --- source | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/source b/source index 197c5f7cfa1..900c031b55a 100644 --- a/source +++ b/source @@ -59537,8 +59537,7 @@ interface HTMLDetailsElement : HTMLElement { following conditions:

      -
    • Both a and b are in the same tree, and the - root of that tree is a Document or a ShadowRoot.
      • +
    • Both a and b are in the same tree.
    • They both have a name attribute, their name attributes are not the empty string, and the value of From b945c9c93579ede7b6570c8f7cc376109b17b406 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Mon, 25 Sep 2023 13:52:55 -0400 Subject: [PATCH 09/13] Strictly enforce exclusivity for
      . This is as proposed in https://github.com/openui/open-ui/issues/786#issuecomment-1710709737 --- source | 132 ++++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 98 insertions(+), 34 deletions(-) diff --git a/source b/source index 49149b38ca2..b40cdbae599 100644 --- a/source +++ b/source @@ -10697,6 +10697,14 @@ partial interface Document {

      This is only populated for "about:"-schemed Documents.

      +

      Each Document has a fire + mutation events flag, which is a boolean, initially true.

      + +

      This is intended to suppress firing of DOM Mutation Events in cases when they + would normally fire. The specification describing mutation events is not actively maintained so + it does not look at this flag, but implementations are expected to act as though it did. + UIEVENTS

      +

      The DocumentOrShadowRoot interface

      DOM defines the open, then - return.

      • - -
    • -

      If one of oldValue or value is null and the other is not null, - run the following steps, which are known as the details notification task steps, for - this details element:

      - -

      When the open attribute is toggled - several times in succession, the resulting tasks essentially get coalesced so that only one - event is fired.

      - +

    • If localName is name, then:

        -

      1. If oldValue is null, queue a details toggle event task given - the details element, "closed", and "open".

        2. - -

      2. Otherwise, queue a details toggle event task given the - details element, "open", and "closed".

        3. +
      3. ensure details exclusivity after mutation given element.
      • -
    • -

      If oldValue is null, value is not null, and element has a - name attribute that is not empty, then:

      - +

    • If localName is open, then:

      1. -

        Let groupMembers be a list of elements, containing all elements in - element's details name group except for element, in - tree order.

        +

        If one of oldValue or value is null and the other is not null, + run the following steps, which are known as the details notification task steps, for + this details element:

        -

        This is done because mutation events could be run during this algorithm, and - the mutation event listeners could change the members of the details name group - or the tree order. +

        When the open attribute is toggled + several times in succession, the resulting tasks essentially get coalesced so that only one + event is fired.

        + +
          +

        1. If oldValue is null, queue a details toggle event task given + the details element, "closed", and "open".

          2. + +

        2. Otherwise, queue a details toggle event task given the + details element, "open", and "closed".

          3. +
      2. -

        For each element otherElement of - groupMembers:

        +

        If oldValue is null, value is not null, and element has a + name attribute that is not empty, then:

        +
          -

        1. If the open attribute is set on - otherElement, remove the - open attribute on otherElement. +

        2. +

          Let groupMembers be a list of elements, containing all elements in + element's details name group except for element, in + tree order.

          + +

          This is done because mutation events could be run during this algorithm, and + the mutation event listeners could change the members of the details name group + or the tree order. +

          3. + +
        3. +

          For each element otherElement of + groupMembers:

          +
            +

          1. If the open attribute is set on + otherElement, remove the + open attribute on otherElement. +

          +
      • +

      The details HTML element insertion + steps, given insertedNode, are:

      + +
        +
      1. Let document be insertedNode's node document.
        2. + +
      2. Let oldFlag be the value of document's fire mutation events flag.
        3. + +
      3. Set document's fire + mutation events flag to false.
        4. + +
      4. Ensure details exclusivity after mutation given insertedNode.
        5. + +
      5. Set document's fire + mutation events flag to oldFlag.
        6. +
      +

      To queue a details toggle event task given a details element element, a string oldState, and a string newState: @@ -60097,6 +60130,37 @@ interface HTMLDetailsElement : HTMLElement { to oldState.

      +

      To ensure details exclusivity after mutation given a details element + element: + +

        +
      1. If element does not have the open + attribute present, then return.
        2. + + +
      2. If element does not have a name attribute, + or its name attribute is the empty string, then + return.
        3. + +
      3. +

        For each element otherElement of + element's details name group: + +

          +
        1. If otherElement is different from element and otherElement + has the open attribute present, then: + +
            +
          1. Remove the open attribute on element.
            2. + +
          2. Return.
            3. +
          +
          2. +
        +
        4. +
      +

      The name and open IDL attributes must reflect the respective content attributes of the same name.

      From 20490af13548541409011d58d1a333ef85994ac5 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Thu, 28 Sep 2023 11:11:15 -0400 Subject: [PATCH 10/13] Address review comments from @domenic. --- source | 136 ++++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 91 insertions(+), 45 deletions(-) diff --git a/source b/source index b40cdbae599..43f36b83559 100644 --- a/source +++ b/source @@ -60015,11 +60015,9 @@ interface HTMLDetailsElement : HTMLElement {

      1. If namespace is not null, then return.

        2. -

      2. If localName is name, then: -

          -
        1. ensure details exclusivity after mutation given element.
          2. -
        -
        3. +

      3. If localName is name, then ensure + details exclusivity by closing the given element if needed given + element.

      4. If localName is open, then:

          @@ -60043,32 +60041,9 @@ interface HTMLDetailsElement : HTMLElement {
        5. -
      5. -

        If oldValue is null, value is not null, and element has a - name attribute that is not empty, then:

        - -
          -
        1. -

          Let groupMembers be a list of elements, containing all elements in - element's details name group except for element, in - tree order.

          - -

          This is done because mutation events could be run during this algorithm, and - the mutation event listeners could change the members of the details name group - or the tree order. -

          2. - -
        2. -

          For each element otherElement of - groupMembers:

          -
            -

          1. If the open attribute is set on - otherElement, remove the - open attribute on otherElement. -

          -
          3. -
        -
        6. +

      6. If oldValue is null and value is not null, then ensure + details exclusivity by closing other elements if needed given + element.

      @@ -60085,7 +60060,8 @@ interface HTMLDetailsElement : HTMLElement {
    • Set document's fire mutation events flag to false.
      • -
    • Ensure details exclusivity after mutation given insertedNode.
      • +
    • Ensure details exclusivity by closing the given element if needed given + insertedNode.
    • Set document's fire mutation events flag to oldFlag.
      • @@ -60130,31 +60106,61 @@ interface HTMLDetailsElement : HTMLElement { to oldState.

      -

      To ensure details exclusivity after mutation given a details element - element: +

      To ensure details exclusivity by closing other elements if needed given a + details element element:

        -
      1. If element does not have the open - attribute present, then return.
        2. +

      2. If element does not have a name + attribute, or its name attribute is the empty string, + then return.

        3. + +
      3. +

        Let groupMembers be a list of elements, containing all elements in + element's details name group except for element, in + tree order.

        + +

        This is done because mutation events could be run during this algorithm, and + the mutation event listeners could change the members of the details name group + or the tree order. +

        4. + +
      4. +

        For each element otherElement of + groupMembers:

        +
          +

        1. If the open attribute is set on + otherElement, remove the + open attribute on otherElement. +

        +
        5. +
      + +

      To ensure details exclusivity by closing the given element if needed given a + details element element:

      + +
        +

      1. If element does not have an open + attribute, then return.

        2. -
      2. If element does not have a name attribute, - or its name attribute is the empty string, then - return.
        3. +

      3. If element does not have a name + attribute, or its name attribute is the empty string, + then return.

      4. For each element otherElement of element's details name group:

          -
        1. If otherElement is different from element and otherElement - has the open attribute present, then: +
        2. +

          If otherElement is different from element and otherElement + has the open attribute present, then:

            -
          1. Remove the open attribute on element.
            2. +

          2. Remove the open attribute on element.

            3. -
          3. Return.
            4. +

          4. Return.

        @@ -60264,6 +60270,37 @@ interface HTMLDetailsElement : HTMLElement { </section>
    +
    +

    The following example shows what happens when the open + attribute is set on a details element that is part of a set of elements using the + name attribute to create an exclusive accordion.

    + +

    Given the initial markup:

    + + 
    <section class="characteristics">
+ <details name="frame-characteristics" id="d1" open>...</details>
+ <details name="frame-characteristics" id="d2">...</details>
+ <details name="frame-characteristics" id="d3">...</details>
+</section>
    + +

    and the script:

    + + 
    document.getElementById("d2").setAttribute("open", "");
    + +

    then the resulting tree after the script executes will be equivalent to the markup:

    + + 
    <section class="characteristics">
+ <details name="frame-characteristics" id="d1">...</details>
+ <details name="frame-characteristics" id="d2" open>...</details>
+ <details name="frame-characteristics" id="d3">...</details>
+</section>
    + +

    because setting the open attribute on d2 removes it + from d1.

    + +

    The same happens when the user activates the summary element inside of d2.

    +
    +

    Because the open attribute is added and removed @@ -109030,8 +109067,17 @@ document.body.appendChild(frame) erase all event listeners and handlers given document's relevant global object.

    +
  • Let oldFlag be the value of document's fire mutation events flag.
    • + +
  • Set document's fire + mutation events flag to false.
    • +

  • Replace all with null within - document, without firing any mutation events.

    • + document.

    + +
  • Set document's fire + mutation events flag to oldFlag.

  • If document is fully active, then:

    From 0c643966b0edc10c67543cb4742e6021295af4e9 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Thu, 28 Sep 2023 11:20:06 -0400 Subject: [PATCH 11/13] Update note explaining authoring requirement to reflect exclusivity enforcement changes. --- source | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/source b/source index 43f36b83559..a0b5c31916d 100644 --- a/source +++ b/source @@ -59960,11 +59960,11 @@ interface HTMLDetailsElement : HTMLElement { present.

    The group of elements that is created by a common name attribute is intended to be exclusive, meaning that at most - one of the details elements can be open at once. This exclusivity is enforced by - user agents only when a details element is opened, and is not enforced by user agents - when parsing or when inserting elements into the DOM tree. This is why there are also - requirements on authors to ensure that the exclusivity is correct.

    + data-x="attr-details-name">name attribute is exclusive, meaning that at most one of the + details elements can be open at once. While this exclusivity is enforced by user + agents, the resulting enforcement immediately changes the open attributes in the markup. This requirement on authors + forbids such misleading markup.

    The open content attribute is a boolean attribute. If present, it indicates that both the summary and From 65a26eda3408cd42d07944ba8b3317e06afc31d0 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Thu, 28 Sep 2023 16:00:44 -0400 Subject: [PATCH 12/13] Add a should (with explanatory note) about keeping related elements together. --- source | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/source b/source index a0b5c31916d..7abcddfbd59 100644 --- a/source +++ b/source @@ -59966,6 +59966,12 @@ interface HTMLDetailsElement : HTMLElement { data-x="attr-details-open">open attributes in the markup. This requirement on authors forbids such misleading markup.

    +

    Documents that use the name attribute to group multiple + related details elements should keep those related elements together in a containing + element (such as a section element).

    + +

    Keeping related elements together can be important for accessibility.

    +

    The open content attribute is a boolean attribute. If present, it indicates that both the summary and the additional information is to be shown to the user. If the attribute is absent, only the From e3ede80064e9c2c95c8096d01ed4614934dd27a5 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Fri, 29 Sep 2023 09:39:52 -0400 Subject: [PATCH 13/13] Address review comments from @domenic, including more suppression of mutation events. --- source | 91 +++++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 58 insertions(+), 33 deletions(-) diff --git a/source b/source index 7abcddfbd59..3265de433b5 100644 --- a/source +++ b/source @@ -60058,19 +60058,8 @@ interface HTMLDetailsElement : HTMLElement { steps, given insertedNode, are:

      -
    1. Let document be insertedNode's node document.
      2. - -
    2. Let oldFlag be the value of document's fire mutation events flag.
      3. - -
    3. Set document's fire - mutation events flag to false.
      4. - -
    4. Ensure details exclusivity by closing the given element if needed given - insertedNode.
      5. - -
    5. Set document's fire - mutation events flag to oldFlag.
      6. +

    6. Ensure details exclusivity by closing the given element if needed given + insertedNode.

    To queue a details toggle event task given a details element @@ -60116,29 +60105,49 @@ interface HTMLDetailsElement : HTMLElement { details element element:

      +

    1. Assert: element has an open attribute.

      2. + +

    2. If element does not have a name attribute, or its name attribute is the empty string, then return.

      3. -
    3. -

      Let groupMembers be a list of elements, containing all elements in - element's details name group except for element, in - tree order.

      +

    4. Let document be element's node document.

      5. -

      This is done because mutation events could be run during this algorithm, and - the mutation event listeners could change the members of the details name group - or the tree order. - +

    5. Let oldFlag be the value of document's fire mutation events flag.

      6. + +

    6. Set document's fire + mutation events flag to false.

      7. + +

    7. Let groupMembers be a list of elements, containing all elements in + element's details name group except for element, in tree + order.

    8. For each element otherElement of groupMembers:

        -

      1. If the open attribute is set on - otherElement, remove the - open attribute on otherElement. +

      2. +

        If the open attribute is set on + otherElement, then:

        + +
          +

        1. Assert: otherElement is the only element in + groupMembers that has the open attribute + set.

          2. + +

        2. Remove the open attribute on otherElement.

          3. + +

        3. Break.

          4. +
      9. + +

    9. Set document's fire + mutation events flag to oldFlag.

    To ensure details exclusivity by closing the given element if needed given a @@ -60153,24 +60162,39 @@ interface HTMLDetailsElement : HTMLElement { attribute, or its name attribute is the empty string, then return.

    • +

  • Let document be element's node document.

    • + +

  • Let oldFlag be the value of document's fire mutation events flag.

    • + +

  • Set document's fire + mutation events flag to false.

    • + +

  • Let groupMembers be a list of elements, containing all elements in + element's details name group except for element, in tree + order.

    • +

  • For each element otherElement of - element's details name group: + groupMembers:

    1. -

      If otherElement is different from element and otherElement - has the open attribute present, then:

      +

      If the open attribute is set on + otherElement, then:

      1. Remove the open attribute on element.

        2. -

      2. Return.

        3. +

      3. Break.

    • + +

  • Set document's fire + mutation events flag to oldFlag.

    • The name @@ -60252,7 +60276,7 @@ interface HTMLDetailsElement : HTMLElement {

    -
    +

    The following example shows the name attribute of the details element being used to create an exclusive accordion, a set of details elements where a user action to open one details element causes @@ -60276,7 +60300,7 @@ interface HTMLDetailsElement : HTMLElement { </section>

    -
    +

    The following example shows what happens when the open attribute is set on a details element that is part of a set of elements using the name attribute to create an exclusive accordion.

    @@ -60301,10 +60325,11 @@ interface HTMLDetailsElement : HTMLElement { <details name="frame-characteristics" id="d3">...</details> </section> -

    because setting the open attribute on d2 removes it - from d1.

    +

    because setting the open attribute on d2 removes it from d1.

    -

    The same happens when the user activates the summary element inside of d2.

    +

    The same happens when the user activates the summary element inside of d2.