2016-03-02 6 views
16

https://www.chromestatus.com/features/6750456638341120
に記載されているように、2つのシャドウピアスのコンビネータは廃止されました。同じことを達成するための下位は何ですか、またはこのシャドウピアス機能は完全に放棄されましたか?:: shadowと/ deep /の代替は何ですか?

+0

をチェックurl( '/common-style.css') ' http://stackoverflow.com/questions/34699350/shadow-piercing-descendant-combinator-deep-including-shadow-pseudo-el/34706299#34706299およびhttp://stackoverflow.com/questions/30829019/polymer-shareを参照してください。 -styles-across-elements/32941101#32941101長期的なソリューションは[CSSカスタムプロパティ(別名CSS変数)]です(https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables )。 – sideshowbarker

答えて

12

問題は、::shadow/deep/がカプセル化を中断することです。彼らがなくなってうれしいです。

良い代替品は以下のとおりです。

+0

レンダリングされる前にシャドウドームにアクセスできない場合、 ':: shadow'を避けることは不可能です。 – RenaissanceProgrammer

+0

@MarcGカプセル化を破る仕組みがない場合、どのようにフレームワークスタイリングをオーバーライドできますか? – adamdport

1

を:

  • ::shadow(シャドーピアスセレクタ) - は直接的な代替品はありません。カスタムのCSSプロパティを使用する必要があります。 Polymer 2: Custom CSS Properties

  • /deep/から:host > * { ... }を定義することによって、交換のいくつかの並べ替えは、(メイン文書内のルールと矛盾しないホストの影ツリーの最上位の子供たちのすべてにルールセットを適用)があります。詳細については

@import 'のようなもので、あなたの影のルート内で `style`要素を使用し、` :: shadow`となりまし `deep`を置き換えるために何かをPolymer 2 Upgrade Notes

関連する問題