Styling Polymer Templates

Note
Use Lit templates instead
Lit templates are recommended. Polymer templates are available in the next long term supported Vaadin version (LTS), but they are deprecated.

Since Polymer templates are Web Components, their content is inside shadow DOM. By design, shadow DOM defines a local style scope that is isolated from global styles. See Style Scopes for more information.

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

my-view.js

  1. import { PolymerElement } from '@polymer/polymer/polymer-element.js';
  2. import { html } from '@polymer/polymer/lib/utils/html-tag.js';
  4. class MyView extends PolymerElement {
  5.   static get template() {
  6.     return html`
  7.       <style>
  8.         :host {
  9.           /* Styles for the <my-view> host element */
  10.           display: block;
  11.         }
  13.         .my-view-title {
  14.           font-weight: bold;
  15.           border-bottom: 1px solid gray;
  16.         }
  17.       </style>
  18.       <h2 class="my-view-title">My view title</h2>
  19.     `;
  20.   }
  22.   static get is() {
  23.     return 'my-view';
  24.   }
  25. }
  26. customElements.define(MyView.is, MyView);