Shadow Dom Style in Vaadin Flow

Question

I've written a vaadin flow wrapper for this polymer element:

@Tag("simple-dropdown")
@HtmlImport("bower_components/simple-dropdown/simple-dropdown.html")
public class DropdownMenu extends Component implements HasComponents, HasSize, HasStyle {
    ...
}

This works. The documentation of simple-dropdown tells me I can style the shadow dom with this css:

simple-dropdown {
    --simple-dropdown-toggle: {
        justify-content: right;
    }
}

However, I'm unable to find the right place for this css in Vaadin flow. Where do I have to put it?

Answer 1

webapp/frontend/styles/shared-styles.html

<custom-style>
    <style>
        simple-dropdown {
            --simple-dropdown-toggle: {
                justify-content: right;
            };
        }
    </style>
</custom-style>

Then, on the toplevel layout (not the flow wrapper!)

@HtmlImport("frontend://styles/shared-styles.html")
public class MainView extends Div {
...
}