Overriding Host CSS

Flow
1

image
image1571×559 89.7 KB

I have selected an input container where both text and an icon are present. I already have a CSS class unit-mode-icon,
vaadin-grid {

&::part(unit-mode-icon) {
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    font-size: 0;
    --transport-icons: "image path";
}

}
So in due to font-size:0 that text is not appearing but when I select that row
but it’s not being applied because the :host {} CSS is overriding it as host CSS has font-size: var(lumo-font-size-m).

My question is can we override :host {} Css

2

Looking at the inspector, it looks like the classname isn’t applied correctly, see the vaadin-text-field#transportations\.UNIT-MODE-ICON. Looks like the classname is applied as an ID attribute instead.

If you have the classname correctly applied in the DOM, then the CSS should be as simple as

.unit-mode-icon {
  /* Override whatever properties you need */
}

That said, this is based on the limited info I can see in the screenshot, some critical pieces are missing. What property on the host are you trying to override?

3

image
image693×746 39.7 KB

You see here in Host css it has font-size:var();
Due to which the CSS font-size:0 of unit-mode-icon is not applying due to which that text is visible if I have selected that row …so I wnat to override that font-size CSS of host{}

4

image
image795×768 42.9 KB

If I’m disselcting the font-size css of host then the CSS of unit-mode-icon is applied correctly

that’s the reason I want to override the CSS of host …

5

image
image834×587 34.7 KB

This is what we are getting after inspecting

6

Why aren’t you simply supplying a value of zero to the font size variable?

7

I have applied it …but due to host’s css it is giving priority to Host font-size:var(lumo-font-size-m) rather than my unit-mode-icon css refer to screenshot 2 that i have provided

8

I’m talking about --vaadin-field…-font-size which should take precedences over lumo

9

If I applied there then whole row will have font-size zero and I want it to be applied only on one cell

10

So the problem is that the part name is in the shadom DOM scope, and the text field component is in the light DOM. So you can’t target the text field using the part name.

The easiest solution is that you add a classname to the text field instance and apply the font-size with that class name.

11

The easiest solution is that you add a classname to the text field instance and apply the font-size with that class name. —> I got this but if i applied that font-size then it will be applicable on all the textfield and I only want to to focus on one particular cell .If I’m wrong please let me know

12

Set the classname on the text field that is in the cell. It shouldn’t affect all text fields then.