Not able to override the nested shadow dom elements using the part selector

[Mehafooz]

Description of the bug

With old vaadin date picker there are nested shadow dom , so im able to override the first level of shadow dom , but not able to override the nested shadow dom

Expected behavior

how to override the nested shadow doms using if they are exposed by parts

Minimal reproducible example

it is reproducable using v14

Versions

• Vaadin / Flow version:14
• Java version:
• OS version:
• Browser version (if applicable):
• Application Server (if applicable):
• IDE (if applicable):

[web-padawan]

Making this work properly would require adding exportparts attribute on the internal text-field which is technically a new feature.

Also note that ::ng-deep isn't going to work with Shadow DOM (it's an Angular specific selector).

[Mehafooz]

Hi @web-padawan , Im using this date picker in my angular app , using ng deep im able to override the css of the shadow dom but nested shadow dom im not able to override , so im i missing something

[web-padawan]

In more recent versions (Vaadin 22 - 24) this isn't necessary since we updates vaadin-date-picker to not use vaadin-date-picker-text-field internally. Consider upgrading to any of these and then you'll be able to use CSS like this:

vaadin-date-picker::part(input-field) {
  background-color: red;
}

Styling nested shadow DOM with ::part() is generally not supported without exportparts as described in this issue vaadin/web-components#1051. We don't have plans to add that attribute in Vaadin 14.

[Mehafooz]

So when i use vaadin 22 ,it has a dependency of lumo styles version 24.x.x ,but i have another library that has dependency of lumo style 1.6.1 bcz that im getting this issue vaadin/web-components#7956