CSS Isolation not working with Radzen components

I'm trying to get CSS isolation to work with the Radzen Blazor components but it seems it is not implemented (correctly).

What I deduce from the rendered Blazor pages is that each tag in the HTML has an attribute which seems to be used as an id for the page. For instance:

<div b-tiop4w2rry="">

Where 'tiop4w2rry' is the page id. In the CSS that is generated by Blazor you can find these 'ids' in the selectors between squared brackets like this:

/* /Pages/SchedulingGroups.razor.rz.scp.css */
.rz-treenode-content-selected[b-tiop4w2rry] {
  background-color: transparent;
  color: #3A84C1;
}
.rz-treenode-content:not(.rz-treenode-content-selected):hover[b-tiop4w2rry] {
  background-color: transparent;
  color: #3A84C1;
}
body:not(.rz-default-scrollbars) [b-tiop4w2rry]::-webkit-scrollbar-thumb {
  border-width: 0px;
}

These 'ids' are missing on the element generated for Radzen and therefore the isolation is not working.

Is this a known issue or by design?

I read in the MS Documentation that you can add the following to the project file:

  <ItemGroup>
    <None Update="Pages\SchedulingGroups.razor.css" CssScope="xxxx" />
  </ItemGroup>

Where 'xxxx' is your custom unique identifier. Blazor uses that instead of the default. But that doesn't help me either because the Radzen components don't allow the 'xxxx' attribute. Even tried adding via the @attributes keyword but the error stays the same (does not support 'xxxx' attribute).

I don't think CSS isolation works for third party libraries. It seems to only work for applications and their pages. Also your CSS selectors seem off. You probably need this:

[b-tiop4w2rry] .rz-treenode-content-selected {
  background-color: transparent;
  color: #3A84C1;
}

This will apply to children of elements that have the b-tiop4w2rry attribute.

My guess is that the Radzen components are created using the BuiltTree mechanism. There the ID attribute should be added and then it would work, I think.

The CSS shown is generated from the local SchedulingGroups.razor.css. The [] are added by the generation.

The source of the Radzen components is available here. They are using regular .razor files. There is no mechanism as far as I know to inject the custom attributes used by the CSS isolation. You can probably use ::deep as shown in the CSS isolation docs.

::deep works like a charm, Thanks.

Could you please provide an example. I am trying to figure out how to use deep. Thanks in advance.

The linked article contains examples of using ::deep.