Question

我刚刚用custom-style打了一堵墙。不幸的是，似乎任何mixins和变量都应用于Light DOM中匹配的元素的后代。另一方面，:root选择器将vars和mixins应用于所有自定义元素。

没有中间地带可以设置风格，例如。任何具有给定类等的自定义元素？例如，我想要

<style is="custom-style">

   my-element.important {
      --border-color: red;
   }  

</style>

为给定类的<my-element>的每个实例设置变量。目前它仅适用于Light DOM（用于文档级样式）和Local DOM（在其他元素中设置变量/ mixins时）中的元素。它也不适用于:root my-element或:root /deep/ my-element或html /deep/ my-element

等任何内容

我已经准备了Plunker的复制品。

Answer 1

正如@lozandier和Karl Polymer's Slack channel所指出的那样，解决方案非常简单。

对于文档级样式，必须使用:root选择器

包装属性组

<style is="custom-style">

   :root {
      my-element.important {
         --border-color: red;
      }
   }  

</style>

对于元素内部的样式，有必要使用:host代替

<dom-module>
   <template>
      <style>

         :host {
            my-element.important {
               --border-color: red;
            }
         }  

       </style>
   </dom-module>
</template>

深度选择器的自定义样式mixin

1 个答案: