How add style

Flow
1

I have such template

<dom-module id="main-layout">
  <template>
    <style>
      .main-navigation {
        grid-area: header;
      }
    </style>
  </template>
</dom-module>

In Java code I use susch
app.addClassName(“main-navigation”);

But it don’t work. Why&

2

You can put your styles directly into .css file in the frontend directory, import it with @StyleSheet annotation and use in Java code.

The listing you’ve provided is a polymer-specific element that wraps its contents so it’s not available to the outside scope without extra manipulations.
It makes sense to put styles into it only when you create some component in the same template and plan to style it.

3

May be you help me. And give me direction

I have parent

@Tag("abstract-grid-view")
@HtmlImport("styles/view/AbstractGridView.html")
public abstract class AbstractGridView<T> extends AbstractView {
...
    private Div div;
    div.setClassName("slot-div");
...
}
	
<dom-module id="abstract-grid-view">
  <template>
    <style>
      :host {
...
      }

      .slot-div {
        padding: 16px;
        font-size: 24px;
        font-weight: 400;
        color: var(--paper-card-header-color, #000);
      }
    </style>
  </template>

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

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

Child

@PageTitle(PAGE_USERLIST_TITLE)
@Tag("userlist-view")
@HtmlImport("styles/view/user/UserListView.html")
@Route(value = PAGE_USERLIST_URL, layout = MainLayout.class)
@Uses - ??? NEED I this annotation ???
public class UserListView extends AbstractGridView<UserDto> {
...
   getElement().appendChild(getParentDiv().getElement());
...
}
	
<link rel="import" href="../AbstractGridView.html">

<dom-module id="userlist-view">
  <template>
    <style include="abstract-grid-view">
    </style>

    <slot></slot>
  </template>

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

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

So I wand applay slot-div to all childs
Am I doing the inheritance right?