Skip to content

[css-nesting-1][css-cascade-6] Clarify absolutization of the selectors of @scope and nested style rules #11212

@cdoublev

Description

@cdoublev

For nested style rules, the spec says:

When serializing a relative selector in a nested style rule, the selector must be absolutized, with the implied nesting selector inserted.

The related commit message refers to #8940, which seems unrelated. If I am not mistaken, it has to do with the implied specificity (#9069). Whether I am wrong or not, it might be helpful to explain the reason of the absolutization.

WPT covers this requirement in this test (non-exhaustive), which is interesting because it shows that :scope is not absolutized. As noted in #9621, in which it was suggested to absolutize it, it would change the specificity. But this issue is still open.

Chrome also absolutizes a scoping root selector when @scope is nested in a style rule. I cannot find where this is specified, nor a corresponding test on WPT. And it does not absolutize a scoping limit selector.

const sheet = new CSSStyleSheet
sheet.replaceSync('style { @scope (root) to (limit) {} }')
sheet.cssRules[0].cssText; // style { @scope (& root) to (limit) {} }

This somewhat suggests that <scope-start> produces <relative-selector-list>, at least when nested in a style rule. Should it?

Another question that comes to my mind is whether nested {} in style { @scope { nested {} } } is a nested style rule, a scoped style rule, or both. I think it is both, but :scope should still be implied (rather than &), as with any scoped style rule. Again, whether I am not wrong or not, I think it should be clarified.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions