Styling Issue

Hi all, I have a view class called GuideCreationView, in which there are multiple components outlined. For example one of which being:

Select<String> playerChampionSelect = new Select<>(); playerChampionSelect.setLabel("Player Champion"); playerChampionSelect.setItems(riotStaticDataService.getChampionNamesListFromGameVersion(guideAdapter.getGuideGameVersion(), LOCALE)); playerChampionSelect.setClassName("guideCreationViewPlayerChampionSelect");

Now, I’m wanting to style this component because the Field, Label, Overlay and Items parts don’t match the theme of my app. I headed to the documentation at: where all the parts and states are clearly outlined.

I’ve create a file in frontend/themes/main/views/guide-creation-view/guide-creation-view.css, and made sure that this file is referenced in frontend/themes/main/styles.css so that it is added to the main theme with @import url('views/guide-creation-view/guide-creation-view.css');

Following the documentation it isn’t clear of the syntax in which to style these components and their parts. For example:

.guideCreationViewPatchVersion::part(label) { color: grey; font-style: italic; }

works! While…

.guideCreationViewPatchVersion vaadin-button::part(label) { color: grey; font-style: italic; }

doesn’t. However

.guideCreationViewAccordion vaadin-accordion-heading::part(toggle) { color: white; }

works! While…

.guideCreationViewAccordion::part(toggle) { color: white; }


So some need the root element referencing, while other’s don’t, which is very confusing.
Do I specify the .className root-element::part, or do I specify the root-element.className::part?
Do I even need to specific the root-element at all in some instances?
What about child elements such as > label? Do I need the className and the root-element referenced? In which order?

To the actual issue at hand, I have this CSS which successfully styles the label text of a Select component within a given view. This CSS is in frontend/themes/main/views/guide-creation-view/guide-creation-view.css:

.guideCreationViewRoleSelect::part(label) { color: white }

I’m now also wanting to center the label text horizontally, so I added this:

.guideCreationViewRoleSelect::part(label) { color: white text-align: center }

…which not only didn’t work, but also removed the previous colour styling which was working correctly before. Why has that happened?

Another question I have is that I’m currently trying to style the components within a specific view. How do I style specific components throughout the application? I’ve heard it’s by creating a components folder in frontend/themes/main/components and adding css files that style the specific components into there such as vaadin-button.css. Is this correct? Is there any other set up to consider such as making sure the file is referenced in frontend/themes/main/styles.css? Do I also need to make sure I reference the components I style in this way with :host?

I think it should be vaadin-button.guideCreationViewPatchVersion::part(label) instead of .guideCreationViewPatchVersion vaadin-button::part(label) if the vaadin-button has the class guideCreationViewPatchVersion but I’m not great at the shadow dom styling either