Styling Templates

How to add component-specific scoped styles directly in the static styles template property.

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’s isolated from global styles. See Shadow DOM Styling 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);

To have your Application Theme applied inside a client-side template, use the applyTheme() utility function, like this:

import { css, html, LitElement } from 'lit';
import { applyTheme } from 'Frontend/generated/theme';

class MyView extends LitElement {

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

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

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

If you want to avoid using shadow DOM in your template, create it like this instead:

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

class MyView extends LitElement {
  protected override createRenderRoot() {
    return this;
  }

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

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

A template without shadow DOM allows your application theme to affect the elements inside the template.

42AE001F-6D1F-456E-B072-27B883C19920

Docs

Docs

Styling Templates