Skip to content

[css-nesting] [css-cascade-6] Clarify behavior of @scope with nesting #9370

Open
@devongovett

Description

@devongovett

The CSS nesting spec has the following example:

.parent {
  color: blue;

  @scope (& > .scope) to (& .limit) {
    & .content {
      color: red;
    }
  }
}

which it says is equivalent to:

.parent { color: blue; }
@scope (.parent > .scope) to (.parent > .scope .limit) {
  .parent > .scope .content {
    color: red;
  }
}

However, according to my reading of css-cascade-6, this seems slightly incorrect.

By default, selectors in a scoped style rule are relative selectors, with the scoping root and descendant combinator implied at the start.

Following this, it would seem that showing .parent > .scope in the nested style rule would be incorrect and redundant, since the rule would already have an implicit :scope prefix. Would it be more correct to show this in the example instead:

.parent { color: blue; }
@scope (.parent > .scope) to (.parent > .scope .limit) {
  :scope .content {
    color: red;
  }
}

where :scope is equal to .parent > .scope as defined in the rule's <scope-start>?

Maybe I'm reading it incorrectly. It's sorta confusing that this is split between two different specifications.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions