Styling Wrapped Webcomponent

I tried to follow the documentation example of creating a Java API for a web component. Therefore I wanted to wrap the paper-slider. It all worked great, so I wanted to adapt the style to match the vaadin lumo theme.

I tried to use a dom-module like that (following the way it can be done with vaadin components):

<dom-module id="vaadin-paper-slider" theme-for="paper-slider">
  <template>
    <style>
      :host {
        background: #ffaaff;
      }
    </style>
  </template>
</dom-module>

I also added the @HtmlImport on my view.

But, unfortunately, the style does not get applied.
Any hints?

Hi! In order to be able to use the theme-for style modules, the component needs to extend ThemableMixin. That mixin has been developed by Vaadin, and I believe Vaadin components are pretty much the only ones using it. None of the Paper elements use it AFAIK.

With Paper elements, you should use the CSS custom properties and mixins exposed by the component. They should be listed in the API docs for each component.