05

In this section you will add scoped styles that are the same for every instance of the component.

Define scoped styles in the static styles class field using the css tag function.

{% switchable-sample %}

// word-viewer.ts

  static styles = css`
    :host {
      background-color: white;
      color: violet;
      cursor: pointer;
      display: block;
    }
    pre {
      padding: 0.2em;
    }
  `;

// word-viewer.js

  static styles = css`
    :host {
      background-color: white;
      color: violet;
      cursor: pointer;
      display: block;
    }
    pre {
      padding: 0.2em;
    }
  `;

{% endswitchable-sample %}

You've defined two selectors here, :host and pre. pre behaves like you may expect if you have prior familiarity with CSS, and will add padding to the pre element that is rendered from the template.

:host is a selector for styling the component itself. The element that owns, or "hosts" a shadow tree is called the host element.

These styles are strongly encapsulated, so a pre element outside the component's shadow DOM) will not be selected.

{% aside "positive" %}

Extra credit

Use the :host() selector so that adding a green class on the word-viewer results in green text.

{% endaside %}