深度選擇器的自定義樣式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>