Styling dialog content in V14

Flow
1

The documentation covers how to style the Dialog itself. But I can’t find any good way to style the content of the dialog.

I have a dialog where I have a footer row (Div inside a VerticalLayout) where I want to change the styling of the buttons. The Problem is I am unable to write a selector to select just the buttons of the footer row.

This styles all buttons of the dialog

<dom-module id="app-vaadin-dialog-overlay" theme-for="vaadin-dialog-overlay">
  <template>
    <style>
		:host([theme~="mydialog"]
) [part="content"]
 {
    	  --_lumo-button-background-color: var(--ng-dialog-footer-button-background-color);
		}
    </style>
  </template>
</dom-module>

In Vaadin 8 I would just append .footer but this doesn’t work. I guess it has to do with the whole Shadow Dom problematic.

:host([theme~="mydialog"]
) [part="content"]
 .footer {
  --_lumo-button-background-color: var(--ng-dialog-footer-button-background-color);
}

I think adding a “dialog footer” theme variant to the button would do the trick but this would mean I have the style of the single dialog at two locations.

2

In this particular case you should be able to style the button directly.

3

But wouln’t that take the “Cascading” part out of CSS when I have to style the button independently from the dialog?