web-dev-qa-db-ja.com

:: shadowと/ deep /の代わりは何ですか？

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

webweb-componentshadow-dom
26
Zhengquan Bai

::shadowおよび/deep/はカプセル化を解除するために削除されました。

代替は次のとおりです。

17
MarcG

Polymer 2：

  • ::shadow（シャドウピアシングセレクター）-直接の代替はありません。代わりに、カスタムCSSプロパティを使用する必要があります。 ポリマー2：カスタムCSSプロパティ

  • /deep/-:Host > * { ... }を定義することにより、ある種の置き換えがあります（ホストのシャドウツリーのすべての最上位レベルの子にルールセットを適用します。これはメインドキュメントのルールと競合しません） 。

詳細情報を確認するには、 Polymer 2 Upgrade Notes

2
magiccrafter

この記事の執筆時点では、::partおよび::theme with Chrome 73以降：

https://www.chromestatus.com/feature/5763933658939392

<submit-form>
  #shadow-root
  <x-form exportparts="some-input, some-box">
    #shadow-root
    <x-bar exportparts="some-input, some-box">
      #shadow-root
      <x-foo part="some-input, some-box"></x-foo>
    </x-bar>
  </x-form>
</submit-form>

<x-form></x-form>
<x-bar></x-bar>

以下を使用して、すべての入力をスタイルできます。

:root::part(some-input) { ... }

それがどのように機能するかについての完全なドキュメントがあります：

https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md

これで何らかの問題を解決できますが、埋め込みツイートに::shadow。

1
sparanoid

「:: v-deep」は私のために働いています。例えば：

    .menu {
        // stuff
    }
    /deep/.sub-menu {     // override submenu
        .sub-menu__mini {
                //stuff
            }
            a, a:hover {
                //stuff
            }
        }
    }

になる：

    .menu {
        // stuff
    }
    ::v-deep .sub-menu {     // override submenu
        .sub-menu__mini {
                //stuff
            }
            a, a:hover {
                //stuff
            }
        }
    }
0
KirstieBallance