密新，類和定製元素在Polymer

Question

我創建一個名爲my-mixins.html文件包含：

<link rel="import" href="../polymer/polymer.html"> 
<style is="custom-style"> 
    :root { 
    --red: { 
     color: red; 
    }; 
    } 

    // This won't work 
    .green: { 
    color: green; 
    } 
</style> 

然後，我創建的元素my-element.html：

<link rel="import" href="bower_components/my-mixins/my-mixins.html"> 

<link rel="import" href="../polymer/polymer.html"> 

<dom-module is="my-element"> 
    <style> 
    .red { 
     @apply(--red); 
    } 
    ... 
    </style> 

    <p class="red">This is red</p> 
    <p class="green">This is not green</p> 

    <script> 
    Polymer({ 
     is: 'my-element' 
    }); 
    </script> 

</dom-module> 

雖然--red工作（如它應該）， .green沒有。 我意識到這是爲了確保造型不會溢出等等。但是...... 實際規則是什麼？ --red是怎麼設置的，它對模塊可用，而​​不是？

Answer 1

我相信這樣可以提供選項來調整使用CSS自定義屬性作爲樣式佔位符的內部樣式。

.green沒有泄漏的原因是由於Shadow DOM的作用域CSS功能。

You can read more about stylehooks in Eric Bidelman's Shadow DOM v1 primer

Answer 2

回答我的具體問題在這裏：

https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style

具體做法是：

聚合物提供了在主文檔中定義樣式定製元素可以利用Polymer的造型系統的幾個特殊功能：

在自定義樣式中定義的文檔樣式被刷新以確保在沒有本地Shadow DOM的瀏覽器上運行時，它們不會泄漏到本地DOM中。

Polymer's shim用於跨範圍樣式的自定義屬性可以用自定義樣式定義。使用：根選擇器來定義適用於所有自定義元素的自定義屬性。

所以，該文檔解釋，:root選擇特別是要用於設置交叉範圍的自定義屬性...