[css-cascade] @scope as a nested grouping rule and CSSNestedDeclarations

[andruud]

This came up when discussing #10389:

It is currently possible to place bare declarations directly in a @scope rule if it's a nested grouping rule:

div {
  @scope (#foo) {
    color: green;
    #bar {
       width: 10px;
    }
    z-index: 42;
  }
}

I think current WPTs (which haven't yet picked up #10234, nor the @nest edit which came before it) require the above to desugar to:

div {
  @scope (#foo) {
    :scope { /* <== The selector and its specificity being the relevant part for this issue */
      color: green;
      z-index: 42;
    }
    #bar {
       width: 10px;
    }
  }
}

(I think per specs that should strictly have been wrapped in a &{} actually, but I apparently forgot to raise an issue for this).

As of #10234, I believe we now intend to desugar to:

div {
  @scope (#foo) {
    /* CSSNestedDeclarations { */
      color: green;
    /* } */
    #bar {
       width: 10px;
    }
    /* CSSNestedDeclarations { */
      z-index: 42;
    /* } */
  }
}

Where the CSSNestedDeclarations rules match whatever #foo matches (but within the scope, obviously), and with ... the same specificity as #foo? It's this specificity part I'm not sure about, as it doesn't seem consistent with how "implied stuff" in @scope is intended to work. For example, the #bar selector effectively gets an implied :where(:scope) selector prepended (#10196), which adds no specificity.

So I wonder if we should specify that CSSNestedDeclarations rules, when the appear directly beneath @scope, should act as :scope {} or :where(:scope) {} rules? (@mirisuzanne)