ポリマーは "！important"を使用せずに内部要素のカスタムCSSプロパティを設定します

Question

x-foo私はbackground-colorを設定するカスタムCSSプロパティを--xbgと定義しました。

x-foo.outer { 
    --xbg: orange; 
} 
x-foo.outer x-foo { 
    --xbg: red; 
    /* Doesn't work, have to use !important?!?!*/ 
} 

I：

<x-foo class="outer"> 
    Outer 
    <x-foo class="inner"> 
    Inner 1 
    </x-foo> 
</x-foo> 

Iは、外側に--xbgを設定し、その値は、内側要素の値をオーバーライド：

私はように子供のような自体の要素と要素を使用しますChromeのインスペクタを使用して、子の定義が実際に親の「下位」であることがわかります。

!importantと高くなるように強制する必要があります。これには他にもさまざまな意味があります。

x-foo.outer x-foo { 
    --xbg: red !important; 
    /* Works */ 
} 

なぜ、子は親プロパティを上書きしないのですか？他のブラウザのため https://plnkr.co/edit/uZxg7G?p=preview（Chromeのみで動作します）

シンプルJSBin：ここ

は、いくつかのより多くの例で、このためplunkerだ http://jsbin.com/wuqobejeci/edit?html,output

Answer 1

を試してみてください、ここで

は作業Fiddle

です

Answer 2

要素は、クラスより優先度が低いです。この問題を解決する最良の方法は、スタイルだけで、そのホストからのクラスcontentwrapperにそのような

<style> 
    :host { 
     display: block; 
    } 

    :host > .contentwrapper { 
     padding: 1em; 
     background-color: var(--xbg, yellow); 
    } 

    </style> 

を下に適用すると言うことです

x-foo.outer { 
    --xbg: orange; 
} 
x-foo.outer x-foo.inner { 
    --xbg: red; 
} 

Answer 3

これは、上記のAndrewの答えに基づいて試してみる価値があると思っています。ホストスタイルだけを使用するとうまくいくようです：

<style> 
    :host { 
    display: block; 
    padding: 1em; 
    background-color: var(--xbg, yellow); 
    } 
</style> 

https://jsfiddle.net/6tzoacxr/