Question

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

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

请注意，我包含“类”。这样，在我的HTML页面中（不在组件中！）我可以：

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

这是一种可怕的方式吗？有哪些替代方案？

Answer 1

Polymer样式的“类”变体使用“/ deep /”选择器，因此您将从Chrome获得弃用警告。出于这个原因，我建议你避免使用“类”变体。非类变体使用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类定义，并与您自己的元素共享，而不是直接使用Polymer的mixin。作为参考，请查看Polymer Starter Kit如何使用共享样式。

我应该包括paper-styles / classes / typography.html来使用Polymer的排版类吗？

1 个答案: