在本节中，你将添加作用域样式，这些样式对组件的每个实例都是相同的。

使用 css 标签函数在 static styles 类字段中定义作用域样式。

// 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;
    }
  `;

你在这里定义了两个选择器，:host 和 pre。如果你之前熟悉 CSS，pre 的行为和你预期的一样，它会为模板中渲染的 pre 元素添加内边距。

:host 是一个用于为组件本身设置样式的选择器。拥有或"托管"Shadow DOM 树的元素被称为宿主元素。

这些样式是强封装的，因此组件 Shadow DOM 外部的 pre 元素不会被选中。

加分练习

使用 :host() 选择器，使得在 word-viewer 上添加 green 类时显示绿色文字。