custom-style

`custom-style` 是 `Polymer` 框架中的一个元素，它用来定义全局的样式，可以在任何地方使用。`custom-style` 元素中的样式可以通过 `HTML` 的 `style` 属性或 `class` 属性来应用。在 `custom-style` 元素中，可以使用 CSS 的 `:host` 伪类来选择当前元素本身，也可以使用 `:root` 伪类来选择文档根元素。例如：

<custom-style>
  <style>
    :host {
      display: block;
      font-size: 16px;
    }

    :root {
      --primary-color: #2196F3;
      --secondary-color: #FFC107;
    }

    h1 {
      color: var(--primary-color);
    }

    .btn {
      background-color: var(--secondary-color);
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</custom-style>

在上面的示例中，`:host` 伪类用来选择当前元素本身，设置了 `display: block;` 和 `font-size: 16px;`。`:root` 伪类用来选择文档根元素，定义了 `--primary-color` 和 `--secondary-color` 两个自定义变量。`h1` 元素设置了颜色为 `var(--primary-color)`，使用了 `--primary-color` 自定义变量。`.btn` 类设置了背景色为 `var(--secondary-color)`，使用了 `--secondary-color` 自定义变量。

使用 `custom-style` 定义的样式可以在任何地方使用，例如：

<h1>Hello World</h1>
<button class="btn">Click Me</button>

这样，`h1` 元素和 `.btn` 类就可以应用 `custom-style` 中定义的样式了。