css - @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。