Workaround for chaining ::part() selector with other selectors in chromium based browsers?

Flow
1

I have also asked this question on Stack Overflow but maybe there is some Vaadin way of addresing our problem.

We want to style date cells based on their state in DatePicker component so I was trying to chain :disabled, :not([disabled]) and/or :not([aria-label='']) with ::part(date) but I have found that it does not work in chromium based browsers as mentioned in some other question on SO. It appears that the bug still hasn’t been solved.

Our client uses only Chrome and Edge for their webapps.

Is there any Vaadin workaround for this bug?

What I am trying to do is for example find <td> elements that have ::part(date)
and are :not([disabled]) and :not([aria-label='']).

Whole CSS selector:

.cycle-picker-overlay vaadin-month-calendar::part(date):not([aria-label='']):not([disabled]) {
  background: hsla(145, 92%, 51%, 0.2);
  --_focus-ring-color: var(--lumo-success-color);
  --_selection-color: var(--lumo-success-color);
}

Example element that I want to match:

<td role="gridcell" part="date" tabindex="-1" aria-label="1 Czerwiec 2024, sobota">1</td>

I know that DatePicker styling subpage defines vaadin-month-calendar::part(disabled date) as a way to selecting disabled date without the need to select the disabled attribute but this solves only half of our problems. Is it somehow possible to use :not([disabled]) and/or :not([aria-label='']) with ::part(date)? What about other selectors?

2

If there was a way to differentiate empty <td> from non empty <td> using ::part() selector this would solve our problem. Maybe something like ::part(date empty). Thats the only option for us that DatePicker styling page misses.
On the screenshot below we can see we styled disabled cells as grey and enabled cells as green but the empty date cells have the same style as enabled cells. We would like them to be white.

image
image1344×542 92.2 KB

Empty date cells are <td> which have empty aria-label but this cannot be excluded from selection using ::part() and ::part(date):not([aria-label='']) does not work as mentioned in the post.

3

For your use case you basically have to select for the empty aria label, which as you figured out, is not possible with the ::part selector. So you can not solve this with global CSS.

You can try using the legacy theming mechanism that injects styles into the shadow DOM of components. To theme the month calendar you can create a vaadin-month-calendar.css file in the components folder of your application’s theme folder (e.g. src/main/frontend/themes/my-app/components/vaadin-month-calendar.css.

Then add this rule to target empty cells:

td[part='date'][aria-label=''] {
    background: green;
}

Apart from that you could file an issue here to add a part name to empty cells, so that they can be styled differently from global CSS as well.

4

Is it possible to apply this legacy mechanism to date pickers with custom class name? We only need to style our custom date picker component not all date pickers in our app.

5

It should work with a custom theme name. In your Java code do:

datePicker.setThemeName("my-date-picker");

And change the CSS rule to:

:host([theme='my-date-picker']) td[part='date'][aria-label=''] {
    background: green;
}
1 Like