Re: [csswg-drafts] [css-scoping] $a > $b { $property: inherit; } behaves absurdly under shadow DOM transformations such as <details> (#8184)

Yup, as others have said, while Selectors works on the original tree(s), inheritance (and the entire rest of CSS) works on the "flattened tree" - that is, a shadow host's children get replaced by its shadow tree, its original children are reparented to their slots, etc. This is the tree that layout works on, by both intention and necessity, and most of CSS wants to be compatible with this tree as a result. In particular, inheritance needs to be compatible with it, since inheritance happens *after* we figure out computed values, and computed value determination works on the flattened tree (so it's consistent with layout)

This also means that properties that inherit by default take their inheritance from the shadow, when an element is slotted. This, too, is a good thing - an element slotted into a shadow would generally like its text color to be consistent with the background color coming from the shadow elements, for example.

There are a few places where this is a less convenient, or more confusing, behavior - you've found one, where explicit inheritance of a non-inherited property "breaks" when the element is slotted, because the shadow parent isn't explicitly inheriting as well. 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.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8184#issuecomment-1338448332 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 00:15:33 UTC