Blazor CSS isolation ::deep not working as expected

[isc30]

Hi, it seems like ::deep is not being replaced correctly on some cases (5.0.100-preview.8.20417.9).

How I expect it to work

• If the selector doesn't have any ::deep, we automatically add the ID to the first selector from the right (.a .b => .a .b[asd123]) (if the selector is composed by multiple expressions like , or the sibling selector, the rule applies per expression)
• If ::deep is present anywhere in the selector, the automatic addition gets skipped and all occurrences of ::deep get replaced with the ID (.a::deep .b => .a[asd123] .b)

Reasoning and Name Change suggestion

Adding a wrapping div as the documentation suggests seems more like a hack than a good solution for this. Users should be able to have full control on where the ID gets outputted.
Given the example before on how I would expect it to work, I also suggest a name change to ::id so it's clear that it would append the ID of the component there.

Examples

• Working Case (::deep alone)

  ::deep .something { }

  Outputs: (ok)

  [asd123] .something { }

• Not Working Case (::deep attached to another selector)

  .table::deep { }

  Outputs:

  .table::deep[asd123] { }

  Expected:

  .table[asd123] { }

• Not Working Case 2 (::deep in a parent selector)

  .table::deep .cell { }

  Outputs:

  .table::deep .cell[asd123] { }

  Expected:

  .table[asd123] .cell { }

[SteveSandersonMS]

I think the confusion here is thinking that ::deep can be used as a modifier on another part of a selector (e.g., a::deep). We don't currently support that, nor say in the docs that we do. Instead we only support ::deep being used as a separate part within a selector (e.g., a ::deep - note the space after a).

So, this isn't going to do anything useful: .table::deep .cell { ... }

Instead you need .table ::deep .cell { ... } or even ::deep .table .cell { ... } depending on whether you want .table to be scoped or not.

The ::deep combinator should be thought of as a boundary, splitting the selector into a scoped part (the left-hand side of the boundary) and an unscoped part (the right-hand side of the boundary).

We could give some meaning to a::deep in the future, but as of today it's meaningless. Ideally we'd make it report a syntax error but I suspect we're too late to make that change for .NET 5.