Documentation versions (currently viewingVaadin 23)

Styling Templates

Since client-side templates are Web Components, their content is inside the shadow DOM. By design, the 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 static styles template property.

import { css, html, LitElement } from 'lit';

class MyView extends LitElement {

  static get styles() {
    return css`
        :host {
          /* Styles for the <my-view> host element */
          display: block;

        .my-view-title {
          font-weight: bold;
          border-bottom: 1px solid gray;

  render() {
    return html`
      <h2 class="my-view-title">My view title</h2>

customElements.define('my-view', MyView);