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

Question

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

难道没有中间地带可以设置样式，例如。任何具有给定 class 等的自定义元素？例如我想要

<style is="custom-style">

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

</style>

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

我已经在 Plunker 上准备了复制品。

Answer 1

正如@lozandier and Karl on 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>

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

Custom style mixin for deep selectors

css

styling

web-component

polymer-1.0