Shadow DOM中details元素的name属性如何实现分组互斥？

原生details元素的name属性可以将多个对话框分组，实现同一组内只能打开一个的互斥效果，但当每个details都封装在Shadow DOM内部时，这个原生功能会失效——因为Shadow DOM是独立的隔离DOM树，原生的分组机制无法跨越边界识别到其他Shadow内部的details。

原问题代码示例 #

JavaScript 部分

let template = `
<style>
:host { display: block; }
</style>
<details name="group">
  <summary>
    label
  </summary>
  <p>
    content
  </p>
</details>
`;

class DetailsXOR extends HTMLElement {
  constructor(){
    super();
    this.root = this.attachShadow({mode:"open"});
    this.root.innerHTML = template;
  }
}
customElements.define("details-xor", DetailsXOR);

HTML 部分

<details-xor></details-xor>
<details-xor></details-xor>
<details-xor></details-xor>

解决方案：手动实现互斥逻辑 #

既然原生机制失效，我们可以在自定义元素中自己实现分组互斥的逻辑，步骤如下：

1. 给自定义元素添加分组标识（比如group属性），替代内部details的name属性来管理分组
2. 监听内部details的toggle事件，当某个details展开时，遍历同组的其他自定义元素，关闭它们内部的details

修改后的代码示例 #

JavaScript 部分

let template = `
<style>
:host { display: block; }
</style>
<details>
  <summary>
    label
  </summary>
  <p>
    content
  </p>
</details>
`;

class DetailsXOR extends HTMLElement {
  constructor(){
    super();
    this.root = this.attachShadow({mode:"open"});
    this.root.innerHTML = template;
    this.detailsEl = this.root.querySelector('details');
    // 绑定toggle事件处理函数
    this.detailsEl.addEventListener('toggle', this.handleToggle.bind(this));
  }

  handleToggle() {
    // 只有当前details展开时才处理互斥逻辑
    if (this.detailsEl.open) {
      // 获取当前元素的分组名，默认用"default"
      const groupName = this.getAttribute('group') || 'default';
      // 找到同组的其他所有details-xor元素
      const sameGroupElements = document.querySelectorAll(`details-xor[group="${groupName}"]`);
      
      sameGroupElements.forEach(el => {
        // 跳过当前元素
        if (el === this) return;
        const internalDetails = el.shadowRoot.querySelector('details');
        // 如果其他元素的details是展开状态，就关闭它
        if (internalDetails.open) {
          internalDetails.open = false;
        }
      });
    }
  }
}
customElements.define("details-xor", DetailsXOR);

HTML 部分

<details-xor group="group"></details-xor>
<details-xor group="group"></details-xor>
<details-xor group="group"></details-xor>

补充说明 #

• 如果想保留内部details的name属性作为分组依据，也可以在handleToggle中读取this.detailsEl.name来替代自定义元素的group属性，逻辑是一样的
• 这种手动实现的方式不受Shadow DOM隔离的影响，完全由自定义元素自己控制分组互斥行为

内容的提问来源于stack exchange，提问作者ALegendsTale