css - 深度选择器的自定义样式混合

Question

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

是否有一个中间地带可以设置样式，例如。任何具有给定类等的自定义元素？例如我想要

<style is="custom-style">

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

</style>

为 <my-element> 的每个实例设置变量与给定的类(class)。目前它仅适用于 Light DOM(用于文档级样式)和 Local DOM(在其他元素内设置变量/混合时)中的元素。它也不适用于 :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>