tutorial-styling-polymer-templates.asciidoc

title	order	layout
PolymerTemplate, Styling Templates	13	page

PolymerTemplate, Styling Templates

Usage of polymer based templates is deprecated since Vaadin 18 and we recommend using Lit based templates instead.

You can add component-specific scoped styles directly in the <style> tag in the template getter.

my-view.js

import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

class MyView extends PolymerElement {

  static get template() {
    return html`
      <style>
        :host {
          /* Styles for the <my-view> host element */
          display: block;
        }

        .my-view-title {
          font-weight: bold;
          border-bottom: 1px solid gray;
        }
      </style>
      <h2 class="my-view-title">My view title</h2>
    `;
  }

  static get is() {
    return 'my-view';
  }
}

customElements.define(MyView.is, MyView);