我是否应该包含 paper-styles/classes/typography.html 以使用 Polymer 的排版 类？

Question

目前，在我的 elements.html 中，我正在做：

<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-styles/classes/typography.html">

请注意，我包括 "classes"。这样，在我的 HTML 页面中（不在组件中！）我可以：

<paper-material elevation="4">
  <h1 class="paper-font-display1">This is actually rendered</h1>
</paper-material>

这是一种糟糕的处理方式吗？有哪些替代方案？

Answer 1

Polymer 样式的 "classes" 变体使用“/deep/”选择器，因此您会收到来自 Chrome 的弃用警告。因此，我建议您避免使用 "classes" 变体。非 classes 变体使用 css mixins，这是推荐用于 Polymer 1.0.

的方法

例如，元素定义可以这样做：

<link rel="import" href="../bower_components/paper-styles/typography.html">
<dom-module>
  <style include="shared-styles">
    .myCaptionStyle {
      @apply(--paper-font-caption);
      color: var(--secondary-text-color);
    }
  </style>
</dom-module>

另外，看看共享样式是如何工作的。您可以从 Polymer 的 css 组件创建一个共享的 css class 定义，并将其与您自己的元素共享，而不是直接使用 Polymer 的 mixin。作为参考，请查看 Polymer Starter Kit 如何使用共享样式。