You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A prelude-less @scope rule, e.g. @scope { ... } scopes the styles to the root of the containing tree if the owner element has no parent element. Example:
<divclass=host><templateshadowrootmode=open><style>@scope {
/* :scope is the _shadow root_ */
}
</style></template></div>
However, the shadow root can't be matched by :scope, because it's replaced by the shadow host for selector purposes. CSS Scoping 1:
For the purpose of Selectors, a shadow host also appears in its shadow tree, with the contents of the shadow tree treated as its children. (In other words, the shadow host is treated as replacing the shadow root node.)
This makes prelude-less @scope rules that exist directly beneath a shadow root mostly non-usable, since the inner selectors either have :scope in them somewhere, or get an implicit :scope prepended if not.
The elements in a shadow tree are not descendants of the shadow host in general (including for the purposes of Selectors like the descendant combinator). However, the shadow tree, when it exists, is used in the construction of the flattened element tree, which CSS uses for all purposes after Selectors (including inheritance and box construction).
But since this doesn't match browser implementations, I assume it's a remnant of a previous spec version.