- From: Ximin Luo via GitHub <sysbot+gh@w3.org>
- Date: Tue, 06 Dec 2022 13:38:31 +0000
- To: public-css-archive@w3.org
> See this [testcase](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cmain%20style%3D%22border%3A%20solid%20magenta%22%3E%0A%20%20bar%0A%20%20%3Cp%20style%3D%22border%3A%20inherit%3B%20margin%3A%205px%22%3Ebaz%3C%2Fp%3E%0A%3C%2Fmain%3E%0A%3Cscript%3E%0Avar%20s%20%3D%20document.querySelector(%22main%22).attachShadow(%7Bmode%3A%20%22open%22%7D)%3B%0Avar%20slot%20%3D%20document.createElement(%22slot%22)%3B%0Aslot.style.cssText%20%3D%20%22display%3A%20block%3B%20border%3A%20solid%20cyan%3B%20margin%3A%205px%22%3B%0As.append(%22foo%22%2C%20slot)%3B%0A%3C%2Fscript%3E). Would you really prefer inheriting the magenta border instead of the cyan one? I wouldn't. > Unfortunately, we have to choose a behavior, and the current behavior makes the most sense in the most cases, despite the occasional mismatch in expectations. The difference between the above testcase (and most other explicit use cases of shadow DOM I've seen described) vs `<details>` is that the former one is opt-in and extremely obvious to the end user (web developer) whereas the second one isn't. Major resources on `<details>` e.g. [[1]](https://www.w3schools.com/tags/tag_details.asp) [[2]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) do not mention the shadow DOM at all. It's an exception that makes `<details>` special, and most web developers will have no idea it's special in this way. Are there other HTML elements that use the shadow DOM as part of its official definition? I have no idea and I bet most web developers don't either - nor should they need to. > Selectors from outside the shadow tree not matching the shadow tree is a feature, not a bug. [..] In other words, the shadow DOM is intended to provide some level of encapsulation. However, its usage in `<details>` forces an encapsulation that the web developer **does not intend** i.e. a weird separation between the outside vs the inside of `<details>`. Forced encapsulation when the user does not request it, is a deficiency of any language. Can you please re-open the bug - since this issue exists and is not fixed. If changing the behaviour of inheritance is too awkward, there are other options: 1. adding another "actually-universal" selector e.g. `**` or something, that at least selects into shadow roots that are not explicitly created by the web developer nor is an internal web browser element, which would include `<details>` 2. changing the definition of `<details>` so it doesn't force unrequested encapsulation onto the end user -- GitHub Notification of comment by infinity0 Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8184#issuecomment-1339402598 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 6 December 2022 13:38:33 UTC