Cannot edit slider dots styles because CSS @apply has been removed

[trekkete]

In your code you use properties:

• --paper-slider-dot-container-styles | (Mixin) Custom styles for dot container | NULL
• --paper-slide-dot-styles | (Mixin) Custon styles for dots | NULL

that you then @apply to the styles of the relative components.

This feature has been removed from browsers, so there is no way to edit the slider dots appearance.

Could you change it in some other way?

Thank you

[javier-godoy]

Hello. We'll investigate this issue. In version 2.1.4 (that we released today) we forked the web-component, so now we could refactor it in order to support shadow DOM styling and/or stylable parts.

Since it's a Polymer 1 web-component, we could implement this approach as a quick workaround.

[javier-godoy]

Hello. We've just released version 3.0.0.

It's a breaking change because the web-component is now fc-l2t-paper-slider instead of l2t-paper-slider, but that's the only change. The Java API is compatible with version 2.x of the add-on.

The new version leverages Vaadin shadow DOM styling mechanism (see demo here), so that you can annotate the 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;
}