CODEWITHSUNDEEP
javascriptcssdomweb-componentshadow-dom
FloWy
FloWy

Reputation: 984

Styling nested Shadow DOMs

Right now, I am trying to style an input in a nested shadow dom in the vaadin-combo-box. I use the vaadin web component in a custom web component. At the moment, I can style the vaadin-text-field with the following CSS:

vaadin-text-field::part(text-field) { ... }

However, I am not able to get into the nested shadow root and style the highlighted div with the input-field part.

Is there a solution to that problem or is it not possible?

enter image description here

Upvotes: 1

Views: 2386

Answers (1)

Hawk
Hawk

Reputation: 2142

For your use case I would use the themeFor="vaadin-text-field" inside @CssImport and use a theme (and its propagation to sub-components feature, see https://vaadin.com/docs/v14/flow/styling/styling-components/#sub-components) to style it like:

input-field[theme~="my-theme"] { }

Not sure if ::part() is able to go into nested shadow DOM but I would try:

vaadin-text-field::part(text-field)::part(input-field) {}

vaadin-text-field::part(input-field) {}

Upvotes: 1

Related Questions