@apply 和样式 dom 模块在 Polymer 2.0 中不起作用

Question

我想让我的样式dom-module，因为我喜欢使用@apply css 指令，我希望我可以做类似的事情：

<dom-module id="my-styles">
 <template>
  <style>
   html {
    --big-title: {
     font-size: 1.3em;
     text-transform: UPPERCASE;
    }
   }
  </style>
 </template>>
</dom-module>

但如果我这样做：

<dom-module id="my-element">
  <template>
    <style include="my-styles">
      h1 {
        @apply --big-title;
      }
    </style>
    ...
  </template>
</dom-module>

很遗憾，这行不通。我不确定为什么。我的问题是我可以将@apply 指令与样式dom-module 解决方案结合使用吗？

Answer 1

我会说，您应该将属性分配给 :host。

检查这个例子： http://jsbin.com/dikacewulu/2/edit?html,output

这里，:host 指的是包含样式的元素（所以my-element）。如果您真的希望这些规则在 html 上可用，您可以使用 :root。