web component - Use the details name attribute in a shadow DOM - Stack Overflow

admin管理员组

文章数量:1277344

How can the name attribute be used if a details element is inside of a shadow DOM?

When a name is set, multiple dialogs are supposed to be grouped, which allows them to be opened exclusively from each other. This doesn't seem to work though if each details element is inside a shadow DOM.

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);

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

How can the name attribute be used if a details element is inside of a shadow DOM?

When a name is set, multiple dialogs are supposed to be grouped, which allows them to be opened exclusively from each other. This doesn't seem to work though if each details element is inside a shadow DOM.

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);

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

• attributes
• web-component
• shadow-dom
• html-tag-details

Share Improve this question Follow asked Feb 24 at 17:36 ALegendsTaleALegendsTale 6133 silver badges99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Alas, the shadowRoot prevents information leaking out into the container element/document

So you have to take control yourself with a container element

Minor example:

<script>
  customElements.define('details-accordion', class extends HTMLElement {
    connectedCallback() {
      this.onclick = evt => [...this.children].map(detail => {
           if (!evt.ctrlKey) detail.open(evt.target === detail);
      });
    }
  });
</script>

<details-accordion>
  <details open>
    <summary>Summary 1</summary>
    "Lorem ipsum dolor sit amet"
  </details>
  <details>
    <summary>Summary 2</summary>
    "consectetur adipiscing elit
  </details>
  <details>
    <summary>Summary 3</summary>
    "sed do eiusmod tempor incididunt ut labore
  </details>
</details-accordion>

本文标签： web componentUse the details name attribute in a shadow DOMStack Overflow