[CSSチュートリアル】CSSスコープ（スタイル分割）の使い方まとめ

I. CSS スコープ（スタイル分割）の利用について

vueでは、cssのスタイルを現在のコンポーネントにのみ反映させるため。 scoped 属性は HTML5 の新機能で、使用すると、style 要素の親とその子にのみスタイルを適用するブール型属性です。

II. スコープ付き実装の原則

vueのscopedプロパティの効果は、主にPostCSSの翻訳によって実現され、以下のように、翻訳前のvueのコードで実現されます。

  <style scoped>
    .test {
      color: blue;
    }
  </style>
  
  <template>
    <div class="test">Hi world</div>
  </template>

(｀・ω・´)ゞ

  <style>
    .test[data-v-5559930f] {
      color: blue;
    }
  </style>
  
  <template>
    <div class="test" data-v-5559930f>Hi world</div>
  </template>

PostCSSは、あるコンポーネント内のすべてのDOMにユニークな動的プロパティを追加し、さらに、そのコンポーネント内のDOMを選択するためのCSSセレクタに対応するプロパティセレクタを追加し、そのプロパティが含まれるDOM<コンポーネント内部DOM>に対してのみスタイルを動作させるアプローチである。

III. スコープド・スレッディング・アプローチ

多くのプロジェクトでは、サードパーティ製コンポーネントを参照する場合、サードパーティ製コンポーネントのスタイルをコンポーネント内でローカルに変更する必要があり、scoped プロパティを削除してコンポーネント間でスタイル汚染を起こしたくありません。そこで、scoped を貫通させる何か特別な方法が必要になります。

方法1 スコープ付き属性を突き抜けて、他のサードパーティ製コンポーネントのスタイルを変更するには、>>> を使用します。

方法2 2を使用する style タグを使用し、1つは scoped 属性がないもの、そして scoped 属性は、サードパーティ製コンポーネントのスタイルを変更するために使用されます。

方法3 スタイルピアスにはsass以下を使用する /deep/

<イグ

方法4 を追加することで、一番外側の id または class は、次のような形式で区別されます。

CSSのスコープ（スタイル分割）についての説明は以上となります。CSS スコープの詳細については、Script House の過去記事を検索するか、引き続き以下の記事を参照してください。