advanced patterns of <details> and <summary> elements in Chrome with nested structure
I've been struggling with this for a few days now and could really use some help. I'm updating my dependencies and I've been researching this but I've been banging my head against this for hours. I'm working with an odd scenario with the `<details>` and `<summary>` elements in my HTML5 application. When I nest `<details>` elements inside each other, the inner `<details>` do not behave as expected. Specifically, when I open the outer `<details>` and then click to open the inner `<details>`, it collapses the outer one instead of leaving it open. This scenario occurs consistently in Chrome version 117.0.5938.62, but works fine in Firefox. Here's a simplified version of my HTML structure: ```html <details> <summary>Outer Details</summary> <p>Some content...</p> <details> <summary>Inner Details</summary> <p>More content...</p> </details> </details> ``` I've tried adding event listeners to prevent the default behavior on the `<summary>` elements, but that didn’t solve the question. I also ensured that there are no CSS rules that could interfere with the display of these elements. Using `pointer-events: none;` on the inner `<summary>` breaks the functionality entirely, which is not a suitable workaround. Is this a known scenario, or is there a correct way to implement nested `<details>` elements to ensure they function properly across all browsers? Any guidance would be appreciated! Is there a better approach? This is happening in both development and production on Ubuntu 20.04. Thanks for taking the time to read this!