Skip to content

Support mutually exclusive <details> behavior via name attribute #672

@aralroca

Description

@aralroca

Currently, jsdom doesn't implement the mutually exclusive behavior for <details> elements that share the same name attribute, as described in the HTML specification.

When multiple <details> elements share the same name attribute, opening one should automatically close others in the same named group, similar to how radio buttons work. This behavior should:

  1. Be triggered by both user interaction and programmatic changes
  2. Fire appropriate toggle events
  3. Maintain proper open attribute state

Browser implementations already support this behavior (tested in Chrome, Firefox, and Safari). Here's a test case demonstrating the expected behavior:

<details name="group1">
  <summary>Item 1</summary>
  Content 1
</details>
<details name="group1">
  <summary>Item 2</summary>
  Content 2
</details>

<script>
  document.querySelectorAll('details[name="group1"]').forEach(d => {
    d.addEventListener('toggle', () => console.log(d.open ? 'opened' : 'closed'));
  });
</script>

Expected behavior:

  • Clicking Item 1 opens it and closes Item 2 if it was open
  • Clicking Item 2 opens it and closes Item 1 if it was open
  • Only one item in the group can be open at a time

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions