Blazor CSS isolation ::deep not working as expected #25866
Labels
area-blazor
Includes: Blazor, Razor Components
✔️ Resolution: By Design
Resolved because the behavior in this issue is the intended design.
Status: Resolved
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
::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)::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 theID
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)Outputs: (ok)
Not Working Case (
::deep
attached to another selector)Outputs:
Expected:
Not Working Case 2 (
::deep
in a parent selector)Outputs:
Expected:
The text was updated successfully, but these errors were encountered: