CSSスコープ（スタイル分割）の使用の概要

1. CSSスコープの使用（スタイル分割）

Vue では、CSS スタイルを現在のコンポーネントでのみ有効にします。scoped scopedは HTML5 の新しい属性です。これはブール属性です。この属性を使用すると、スタイルはスタイル要素の親要素とその子要素にのみ適用されます。

2. スコープの実装原則

Vue のスコープ属性の効果は、主に PostCSS 変換によって実現されます。以下は変換前の Vue コードです。

  <スタイルスコープ>
    。テスト {
      色: 青;
    }
  </スタイル>
  
  <テンプレート>
    <div class="test">こんにちは世界</div>
  </テンプレート>

翻訳後:

  <スタイル>
    .test[データ-v-5559930f] {
      色: 青;
    }
  </スタイル>
  
  <テンプレート>
    <div class="test" data-v-5559930f>こんにちは世界</div>
  </テンプレート>

PostCSS は、コンポーネント内のすべての DOM に一意の動的プロパティを追加し、コンポーネント内の DOM を選択するために、CSS セレクターに対応する追加の属性セレクターを追加します。このアプローチにより、スタイルは、プロパティ <component internal DOM> を含む DOM でのみ機能します。

3. スコープ貫通法

多くのプロジェクトでは、サードパーティ コンポーネントを参照する場合、コンポーネント内でローカルにサードパーティ コンポーネントのスタイルを変更する必要がありますが、スコープ属性を削除してコンポーネント間のスタイル汚染を引き起こすことは望ましくありません。現時点では、スコープを貫通するにはいくつかの特別な方法が必要です。

方法 1: >>> を使用してスコープ属性に侵入し、他のサードパーティ コンポーネントのスタイルを変更します。

方法 2: scoped属性を持つスタイル タグとscoped属性を持たないstyleタグの 2 つを使用して、サードパーティ コンポーネントのスタイルを変更します。

方法3: sassまたはlessスタイルを使用して/deep/浸透する

方法 4:最外層にidまたはclassを追加して区別します。

CSSスコープ（スタイル分割）に関する記事はこれで終了です。CSSスコープに関するより詳しい内容は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。