CSS isolation in blazor doesn't work with predefined Form elements

Question

I have a page, foo.razor, that represents a Form:

<EditForm Model=SomeModel>
    <InputText @bind-Value=SomeModel.Property1 />
    <InputText @bind-Value=SomeModel.Property2 />
    <p>a paragraph</p>
</EditForm>

And next to it I have an isolated CSS, foo.razor.css, for example:

input{
  display: block;
}
p{
  color: lime;
}

The style for the paragraph applies correctly but the style for the input element does not. I can't understand why.

Plus, I know that blazor generates random ids for the elements after compilation. In the browser I can see that the paragraph has such an id but again the input and form elements do not.

I tried adding a class name for the component and use the deep selector, like this:

::deep .classname {
  .......
}

But this does not work either.

question from:https://stackoverflow.com/questions/65890644/css-isolation-in-blazor-doesnt-work-with-predefined-form-elements

Answer 1

The tricky thing about CSS isolation is that it works with plain HTML nodes only, it does not work for components. Under the covers, the elements from your current component that defines isolated CSS get a custom (kind of random) attribute, and CSS rules cascade through that to get scoped to your current component. The framework does not know what is inside other components, through, so it cannot add that attribute to them - their rendering is their own. So, these scoped CSS rules cannot target components.

How to work around that - wrap your components in an HTML element from your current component and write your rules to target elements inside that container too by replacing that element with ::deep.

Here's an example:

input,
::deep input{
    display: block;
    border: 2px solid red;
}

p,
::deep p {
    color: lime;
    border: 2px solid red;
}

And here's how to modify the form

<EditForm Model=SomeModel>
    <div> @* This div right here is the "magic" *@
        <InputText @bind-Value=SomeModel.Property1 />
        <InputText @bind-Value=SomeModel.Property2 />
        <p>a paragraph</p>
    </div>
</EditForm>

@code{
    TestModel SomeModel { get; set; } = new TestModel();
    public class TestModel
    {
        public string Property1 { get; set; }
        public string Property2 { get; set; }
    }
}