[css-nesting] Make nesting work in `:host` rules

[sorvell]

When styling elements in Shadow DOM, combinators can be used with the :host selector to select elements in the shadowRoot (e.g. :host > div { ... }). These rules do not currently work with CSS nesting.

It's not clear if this is a bug or omission or intentional (hope not) via the language at https://drafts.csswg.org/css-nesting/#nesting.

Note that the behavior of combinators next to :host is somewhat unique in that the tree traversed is the shadow tree, not the tree in the scope of the host element. This likely(?) means this needs a specific callout in the spec.

[Loirooriol]

I think this is like #9025, but for & instead of :scope.

[tabatkins]

What selectors don't work, precisely? There's already spec text defining how Nesting interacts with things like :host:

The nesting selector is capable of matching featureless elements, if they were matched by the parent rule.

Is your problematic example already covered by that text? If so, it's an impl bug. If not, I'd love to see it, so we can see if we can address the issue.

[Loirooriol]

It seems that browsers haven't implemented that :is(:host) should work, and they are internally using :is() for nesting.

[tabatkins]

Ah, it's not actually clear in the spec text that :is(:host) should work. (It obviously should work.) That's an obvious fix; I'll open an issue against Selectors. (see next comment)

[tabatkins]

Nm, it does indeed say that it should work, in the definition of "featureless"

[emolr]

This seems to work correctly in Chrome and Firefox now.
Safari is still discarding all nested selectors from host, eg. :host { .my-selector {...} }

[jpzwarte]

I'm trying to style a custom element with various states (like :hover and :active).

I cannot do

:host([foo]) {
  ...

  &:hover {
    ...
  }
}

Instead i have to write

:host([foo]) { ... }
:host([foo]:hover) { ... }

This does work, but doesn't win any awards for clean code:

[foo] {
  :host(&) {
    ...
  }
  
  &:hover {
    :host(&) {
      ...
    }
  }
}

It would be nice if we could do nesting in combination with :host and not have to use the above workarounds.

[mantou132]

Currently browsers support :host { & span {} }, e.g: chrome

but not support :host { &[m] {} }, i really want this feature, because nesting :host let the same css work in shadow dom and light dom:

/** shadow dom */
@scope(:host) {
  :scope {
    &[m] { margin: attr(m px, 0); }
  }
}


/** light dom */
  :scope {
    &[m] { margin: attr(m px, 0); }
  }

When & represents :host, can &xxx be converted to :host(xxx)?

also see: #11000 (comment)

@tabatkins

[Loirooriol]

From #10179 (comment):

Compound selectors are allowed to match the host only if all the contained simple selectors are allowed to match the host.

& is allowed to match the host. But [m] isn't allowed.