@apply 和样式 dom-module 在 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.

@apply 和样式 dom-module 在 Polymer 2.0 中不起作用

@apply and a style dom-module won't work in Polymer 2.0

css

polymer

polymer-2.x