> Markdown version of [Styling Polymer Templates](https://vaadin.com/docs/v14/flow/templates/polymer-templates/styling-polymer-templates). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# 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](https://vaadin.com/docs/v14/flow/styling/style-scopes.md) for more information.

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

`my-view.js`

```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);
```

`8BB5FB0E-C129-4A30-B709-BE6FBCF4C083`