Styling Enhanced Dialog

Flow
1

I am trying to style parts of the Vaadin Enhanced Dialog component, and I am struggling to find the right CSS to make it happen. As an example, one of the things I’m trying to change the font of the header, which is rendered as an <h3> element.

My subclass of EnhancedDialog has the following @CssImport:
@CssImport(value = "./celWindow.css", themeFor = "vcf-enhanced-dialog-overlay")

Then in my CSS I have the following selector:

[part="header"]
 h3 {
   font-size: var(--lumo-font-size-l);
}

I can see this style being pulled into the <style> element of the Shadow DOM, but it doesn’t appear to propagate down to the Light DOM, no matter what I try.

What is the right way to style the sub-parts of the EnhancedDialog?

2

I can style these by putting the following CSS in my global style sheet, but that seems less than ideal.

vcf-enhanced-dialog-overlay .enhanced-dialog-content {
   height: 100%;
}

vcf-enhanced-dialog-overlay .enhanced-dialog-header h3 {
   font-size: var(--lumo-font-size-l);
   margin: 0;
}