Styling top level elements using isolated css

[StevenTCramer]

I don't understand this wrapping with a div so we can apply styles. I witness it but don't understand it.

If the top element in a component is a web component and not a native element then we can't actually style it?

Is there a way to fix this in FluentUI or Blazor or Fast?

[vnbaaij]

It is a Blazor thing (in general). See https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0#child-component-support.

As described there:

Scoped CSS only applies to HTML elements and not to Razor components or Tag Helpers, including elements with a Tag Helper applied

Or do you mean something else?

[StevenTCramer]

Is it just me or doesn't this make scoped css of much much less value?

[oneolddev]

@StevenTCramer

I'm curious. How often do you need to do this? For which components in this library?

If the top element in a component is a web component and not a native element then we can't actually style it?

Web components can encapsulate parts of their styling by using a shadow DOM. They can provide limited styling capabilities through slots and parts.

[StevenTCramer]

You almost always want to style the containing element. And it is almost always a Fluent Stack Layout or Grid. One simply would want to style the top container doesn't matter if web component or any Component. I frankly think it makes the Blazor razor.css of little value. I am doing my own scoped css with <style> tags instead because of this.

<style>
  @($@"
    #{Id} {{
      background-color: var(--neutral-layer-1);
      min-height: 100vh;
      --accent-fill-rest: var(--accent-fill-rest);
    }}
    
    ...

[oneolddev]

Interesting - using the CSS Id Selector. It's simple but I can see some limitations. CSS Ids are supposed to be unique on a page. So you can't have multiple instances of on a page. But if this isn't an issue, I think it's a viable approach.