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:

details-element-polyfill/src/styles.js

Lines 5 to 7 in 0f1404b

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

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