CSSによる解決：ドーナツスコープ

さまざまなコンテンツを表示できるWebコンポーネントがあると想像してください。他のコンポーネントを注入できる場所のどこかにスロットがある可能性があります。親コンポーネントには、保持するコンテンツコンポーネントのスタイルとは無関係の独自のスタイルもあります。

これは挑戦的な状況になります：

親コンポーネントのスタイルが内側に漏れないようにするにはどうすればよいですか？ これは新しい問題ではありません。ニコール・サリバンは2011年にそれを説明しました！主な問題は、CSSを作成してコンテンツに影響を与えないようにすることであり、彼女はドーナツスコープ

。

「スコープが始まる場所だけでなく、それが終わる場所だけでなく、言う方法が必要です。したがって、スコープドーナツ」。

ドーナツスコーピングがウェブ年の古代の問題であっても、選択した検索エンジンで「CSSドーナツスコープ」を簡単に検索する場合、2つのことに気付くかもしれません。

それらのほとんどは、まだ最近の@scope at-ruleについて話しています。

ほぼすべての結果は2021年以降です。

1. 巧妙な「CSSドーナツスコープ - @スコープ」クエリでも同様の結果が得られます。年ごとに行くことは、
ドーナッツスコープ
2. テーブルに新しいものをもたらすようには見えません。ドーナツのスコープは、@scopeまで、ol ’cssグローバルスコープのもう1つの頭痛のように、私たちの心の奥にとどまったようです。
および（ネタバレ！）、@Scopeアットルールはドーナツスコーピングのためのより簡単なパスをもたらしますが、長年にわたってもっと試行された解決策があったに違いないと感じています。私たちはそれらのそれぞれを冒険し、今日のソリューションである@scopeで最終的な停止を行います。 CSSの歴史の中で素晴らしい演習です！

たとえば、次のゲーム画面を考えてみましょう。タブセットと。コンテンツスロットを備えたParent Elementがあり、そこには.inventoryコンポーネントが注入されます。 Parent Colorを変更すると、内部の色も変更されます。 どうすればこれが起こらないようにすることができますか？ .contentの内部のテキストが.parentの色を継承するのを防ぎたいです。 それを無視してください！

最初のソリューションはまったく解決策ではありません！

これは、ドーナツスコープの喜びなしで生活を送ることができるため、これは最もよく使用されるアプローチかもしれません（クレイジー、正しいですか？）。ここでより具体的にしましょう。それは露骨にそれを無視するだけでなく、CSSのグローバルな範囲とそれを念頭に置いて書くスタイルを受け入れます。最初の例に戻ると、親のスタイルがコンテンツコンポーネントに内側に漏れるのを止めることができないため、親のスタイルをより少ない特異性で書きます。

body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}

このアプローチは今のところ十分ですが、プロジェクトが成長するにつれて、その特異性だけでスタイルを管理することで、最悪の場合は退屈で、混oticとしています。コンポーネントは、それらがどこにあるかによって異なる動作をする場合があり、CSSまたはHTMLを変更すると、予期せぬ方法で他のスタイルを破ることができます。

2つのCSSプロパティがバーに入ります。まったく異なるバーのバースツールが落ちます。

トーマス・フックス

この小さな例では、スタイルを2回上書きする方法を見ることができます。

浅いドーナツスコープ：not（）

私たちの目標は、.parentのみを除外し、.contentスロットに挿入できるものは何でも除外することです。したがって、.contentではなく、parentの残りの部分ではありません….contentではなく…

：not（）！ この方法で、.contentスタイルは、それらの.parentで定義されているスタイルに悩まされません。 各例でdevtoolsを開くと、大きな違いがわかります。 改善と同じくらい良いことに、最後の例には浅い範囲があります。したがって、もう1つのスロットがより深くネストされている場合、それがどこでスロットされるかを事前に知らない限り、私たちはそれに到達することができません。 これは、Direct Descendantセレクター（＆gt;）を使用しているためですが、それなしでは機能させる方法が見つかりませんでした。内部の複雑なセレクターの組み合わせを使用しても：not（）はどこにでも有用ではないようです。たとえば、2021年に戻って、Lea Verou博士はドーナツのスコーピングについて次のように述べました：not（）次のセレクターカクテルを使用してください：

body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}

しかし、このスニペットは、その子孫の代わりに.container/.parentクラスと一致するように見えます。 すべての最新のブラウザが複雑なセレクターをサポートするようになるまで、

？

テスト：https：//t.co/rhsjardvsw

so：

- .foo：not（.foo .foo *）は1つのラッパー内で一致しますが、2つの

.container:not(.content *) {
  /* Donut Scoped styles (?) */
}

- .container：not（.content *） （@leaverou）2021年1月28日

@scopeでドーナツスコーピング



したがって、ドーナツスコーピングの完了に対する最後のステップは、1つのDOMレイヤーを超えることです。幸いなことに、昨年、私たちは@Scope At-Ruleに贈られました（Almanacエントリで詳細を読むことができます）。一言で言えば、スタイルがスコープされるDOMのサブツリーを選択できるため、グローバルな範囲はもうありません！

より良いものは、選択したサブツリー内にスロットを残すことができます（通常はスコープルートと呼ばれます）。この場合、スコープなしでparent要素をスタイリングしたい。

body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}

そして、それはどんなにネストされていても、parentの内部のすべての.content要素を検出します。したがって、スロットを書いている場所を心配する必要はありません。最後の例では、代わりに次のスタイルを書いて、触れずに.parentの要素のテキスト色を変更することができます。

body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}

変更するすべての要素をリストするのは不便に思えるかもしれませんが、ネストされたスロットのスコーピングを台無しにするため、ユニバーサルセレクター（*）のようなものを使用することはできません。この例では、ネストされた.contentは範囲から外れますが、そのコンテナは除外されません。カラープロパティが継承するため、ネストされた.contentは関係なく色を変えます！

そしてヴォイラ！両方のコンテンツスロットは、スコープ付きドーナツホール内にあります：

この方法では

浅いスコーピングがまだ可能です。スロットセレクターを書き換えて、Parentの直接的な子孫のみがスコープから除外されるようにする必要があります。ただし、スコープルートを参照するスコープセレクターを使用する必要があります。

この場合は、浅いスコーピングであるため、このインスタンスではユニバーサルセレクターを使用できます。

.container:not(.content *) {
  /* Donut Scoped styles (?) */
}

結論

2011年に造られた志望の特徴であるドーナツスコーピングは、2024年にようやく生き返りました。最近まで、CSSグローバルスコープの別の結果として、それ自体が非常に多くの癖を持っていたため、私たちの心の奥に座っているように見えました。しかし、CSSWG（新しいCSS機能の仕様を書く背後にある人々）が@scope at-ruleのスペックを書くときにそれに対処する意図があるため、それがすべての人のレーダーの下にあると言うのは不公平です。

それが何であれ、私たちは私たちのCSSで真のドーナツスコーピングを持つことができることに感謝しています。ある程度、Firefoxがそれをサポートするのを待つ必要があります。 ？

このブラウザーサポートデータはCaniuseからのもので、詳細があります。数字は、ブラウザがそのバージョン以降の機能をサポートしていることを示しています。

以上がCSSによる解決：ドーナツスコープの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。