Expose shadow DOM elements with "part"

[kkleinwi]

Feature proposal

We'd like to alter the styling of the dots with CSS loaded at runtime (not compiled into the application theme).
I don't believe it is possible to do this unless the DOM elements are exposed as parts using the part attribute.

Describe solution expectations

Ideally, I'd like a CSS selector like this to work as expected:

fc-lt2-paper-slider.myclass::part(dots) {
left: 5%;
}

Additional information

No response

[javier-godoy]

Hello. While ::part styling is the recommended approach (and thus it makes sense to expose shadow DOM elements), please note that you can use the Vaadin shadow DOM styling mechanism as a workaround (see demo here).

You can annotate a view with @CssImport(value = "./carousel-demo-styles.css", themeFor = "fc-l2t-paper-slider") and add some CSS in frontend/carousel-demo-styles.css

:host([theme~="custom-theme"]) .slider__dots > span { 
	background: purple;
}

Related: #41 (comment)

[kkleinwi]

I believe that technique only works for static CSS compiled into the Vaadin front-end at build time. We're wanting to modify the styles using CSS loaded at runtime (for client-specific branding), and there's no way to access the shadow DOM components without the part mechanism.