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

Question

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

是不是有一个中间地带，它可以风格如。任何具有给定类的自定义元素等？例如，我想有

<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>