Blazor Webassembly: CSS :host variables not applied

Question

I am working on a layout for a Blazor Webassembly component. (=Fat browser client, no server rendering)

The layout looks like this and works as expected:

.grid 
{
    min-height: 100vh;
    min-width: 100vw;
    height: 100vh;
    width: 100vw;
    background-color: black;
    display: grid;
    grid-template-rows: 10px 5vh calc(90vh - 20px) 5vh 10px;
    grid-template-columns: 10px 3vw calc(94vw - 20px) 3vw 10px;
    /*Blazor Special*/
    margin: -8px;
}

.gridCellLogo 
{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
    background-color: red;
}

<div class="grid">
    <div class="gridCellLogo">
        @*Put your component here*@
    </div>
</div>

However, if I use CSS variables, they are not applied. Look at --somecolor

:host
{
    --somecolor: green;
}

.grid {
    min-height: 100vh;
    min-width: 100vw;
    height: 100vh;
    width: 100vw;
    background-color: var(--somecolor);
    display: grid;
    grid-template-rows: 10px 5vh calc(90vh - 20px) 5vh 10px;
    grid-template-columns: 10px 3vw calc(94vw - 20px) 3vw 10px;
    /*Blazor Special*/
    margin: -8px;
}

My question:

Is my CSS wrong or is Blazor Webassembly not ready for CSS variables yet?

I think you are maybe confusing :host with :root here? :host is used to apply styles to the Shadow DOM in Web Components, whereas :root is used to apply CSS properties to the root element which should work for you here. — lamplightdev
– lamplightdev, Commented Mar 18, 2021 at 23:02

Cory Podojil · Accepted Answer · 2021-03-18 00:34:02Z

8

Are you using Blazor CSS Isolation? E.g., MyComponent.razor.css? If so, CSS Isolation does not support pseudo classes, variables, or any CSS that starts with a single colon :.

You will need to declare these variables in a non-compiled CSS file like the app.css under wwwroot/css.

answered Mar 18, 2021 at 0:34

Cory Podojil

8614 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neil Busse May 28 at 21:48

Some of the custom variables work fine and others don't. I don't really understand how this is meant to work

Angel Munoz · Accepted Answer · 2021-03-19 14:08:10Z

2

Blazor css Isolation doesn't use shadow DOM so the :host selector is not available. You can define your variables on the :root selector and then override it with your custom value on a particular css class like this

<div class="grid my-warpper-class">
    <div class="gridCellLogo">
        @*Put your component here*@
    </div>
</div>

:root
{
  --somecolor: red;
}

.my-wrapper-class
{
  --somecolor: green;
  /* blue here is a fallback in case --somecolor didn't exist */
  background-color: var(--somecolor, blue);
}

.gridCellLogo {
  background-color: var(--somecolor, green);
}

defining the --somecolor variable on the :root will make it available everywhere, when you can overwrite it in any other class like my-wrapper-class

in that case the wrapper class and the gridCellLogo will have different background colors

edited Mar 19, 2021 at 14:08

answered Mar 18, 2021 at 5:52

Angel Munoz

211 silver badge2 bronze badges

1 Comment

law_81 Over a year ago

If you are not sure don't post answer but post this as a comment

Collectives™ on Stack Overflow

Blazor Webassembly: CSS :host variables not applied

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related