::Shadow と /deep/ の削除(Chrome 63)
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Chrome 63 以降では、シャドウ ピアス セレクタの ::shadow
と /deep/
を使用して、シャドウルート内のコンテンツのスタイルを設定することはできません。
/deep/
コンビネータは、子孫セレクタとして機能します。x-foo /deep/ div
は x-foo div
のように機能します。
::shadow
疑似要素はどの要素にも一致しません。
削除の決定
::shadow
と /deep/
は Chrome バージョン 45 でサポートが終了しました。これは、2015 年 4 月の Web Components イベントの参加者全員による決定です。
シャドーピアス セレクタの主な懸念は、カプセル化に違反し、コンポーネントがその内部実装を変更できなくなる状況が発生することです。
シャドウ ピアス セレクタの代わりとして、CSS Shadow Parts の仕様が拡張されています。シャドウパートを使用すると、コンポーネント作成者はカプセル化を維持しつつ、複数のプロパティのスタイルを一度にスタイル設定できるように名前付き要素を公開できます。
::shadow と /deep/? をサイトで使用している場合の対処方法
::shadow
セレクタと /deep/
セレクタは、従来の Shadow DOM v0 コンポーネントにのみ影響します。Shadow DOM v1 を使用している場合は、サイト上の何も変更する必要はありません。
Chrome Canary を使用すると、こうした新しい変更によってサイトが正常に動作しないことを確認できます。問題が発生した場合は、::shadow
と /deep/
の使用をすべて削除してみてください。これらのセレクタの使用を削除することが難しい場合は、ネイティブ Shadow DOM から Shady DOM ポリフィルに切り替えることを検討してください。サイトがネイティブ Shadow DOM v0 に依存している場合にのみ、この変更を行う必要があります。
削除の目的 | Chromestatus トラッカー | Chromium のバグ
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2017-10-24 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2017-10-24 UTC。"],[],[]]