Raw text is still visible when its parent details element is closed

[emlowry]

I've only tested this in Edge and IE, but using this polyfill turns this:

<details open>     <summary>Open details</summary>     Show raw text<span> and text in elements</span>. </details> <details>     <summary>Closed details</summary>     Show raw text<span> and text in elements</span>. </details> Text outside the details.

into this:

▼Open details Show raw text and text in elements. ►Closed details Show raw text. Text outside the details.

instead of the expected:

▼Open details Show raw text and text in elements. ►Closed details Text outside the details.

[javan]

Thanks for the report!

Showing and hiding content is implemented with CSS: https://github.com/javan/details-element-polyfill/blob/0f1404bcb46e14134b884a40c6b1d22b54b7f7bf/src/styles.js#L5-L7

Since CSS can only target element nodes, the polyfill would need to wrap all text nodes in an element like <span> or <div>. For now, you can work around this by always using a container element. For example:

<details>
  <summary>Closed details</summary>
  <div>
    Show raw text<span> and text in elements</span>.
  </div>
</details>

[dalvarezmartinez1]

@javan Thanks for the polyfill.But this will fail even without raw text. If the element(s) following the summary override the display property and their css selector has a higher specificity. Maybe !important would be a nice addition:

details:not([open]) > *:not(summary) { display: none !important; }