Style from polymer

Flow
1

How I can use differnet style for my own components?

For exmaple I have component MyVL extends VerticalLayout

And I want applay Paper-Card styles to it (border, shadow etc)

Something like

<link rel="import" href="../../bower_components/paper-card/paper-card.html">

<dom-module theme-for="vaadin-vertical-layout">
  <template>
    <style>
      :host {
        @apply(--paper-card);
      }
    </style>
  </template>
</dom-module>
2

You need to add some descriptive class="my-vl" (or some other attribute) on the extended VerticalLayout, and then target that in the theme module with :host(.my-vl).

The <dom-module> in your example is missing a unique id attribute.

3 
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/vaadin-ordered-layout/src/vaadin-vertical-layout.html">

<dom-module id="abstract-view" theme-for="vaadin-vertical-layout">
  <template>
    <style include="vaadin-vertical-layout">
      :host(.abstract-view) {
        text-align: center;
        @apply --paper-card;
      }
    </style>
  </template>

  <script>
    class AbstractView extends Polymer.Element {
      static get is() {
        return 'abstract-view';
      }
    }

    window.customElements.define(AbstractView.is, AbstractView);
  </script>
</dom-module>

Don’t work((

4

Here’s the simplest way to do it, as far as I know:

In Flow/Java:

class MyVL extends VerticalLayout {
   public MyVL() {
	   this.getElement().getClassList().add('my-vl');
   }
}

In HTML (in shared-styles.html for example):

<link rel="import" href="../path/to/bower_components/paper-card/paper-card.html">
<link rel="import" href="../path/to/bower_components/shadycss/apply-shim.html">

<dom-module id="my-vl-styles" theme-for="vaadin-vertical-layout">
  <template>
    <style>
		:host(.my-vl) {
			@apply --paper-card;
		}
    </style>
  </template>
</dom-module>