* should also select shadow roots, a non-element node

[infinity0]

Original issue at https://bugzilla.mozilla.org/show_bug.cgi?id=1803927

Basically the bug is caused by * selecting only "element nodes", and not selecting the shadow-root "non-element node" [1] that is created by the definition of <details>. [2]

As I understand, and according to various other people's understanding of Shadow DOM as described in various web documents, shadow DOM is meant to provide encapsulation, e.g. so you can include other people's content in your own content without their scripts/styles breaking your scripts/styles, including browser UI elements. (Your scripts/styles OTOH can affect their scripts/styles, which makes sense as you are in control, and can write your scripts/styles in a way so as not to break theirs. All good.)

Normally when people use <details> however, there is no encapsulation intended. The content inside and outside the <details> is my own content, and I do not want there to be any separation. In particular, I want elements inside the <details> to inherit CSS rules as normal. Because * does not select the shadow-root, there is no way to have it pass through inherited properties like box-sizing, even though my CSS rules can reach into its children directly and apply there.

[1] https://www.w3.org/TR/css-scoping-1/#shadow-dom
[2] https://html.spec.whatwg.org/#the-details-and-summary-elements

[infinity0]

closing in favour of w3c/csswg-drafts#8184 as I realised it was more CSS related, please post any comments there