CSSスコープ(スタイル分割)の使用の概要

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をよろしくお願いいたします。

<<:  MySQL で 1000 万件のレコードをすばやくクエリする方法

>>:  Linux システムで Tomcat を自動的に起動するための設定方法の紹介

推薦する

Reactにおける制御されたコンポーネントと制御されていないコンポーネントの簡単な分析

目次制御されていないコンポーネント制御コンポーネント知らせ結論は制御されていないコンポーネントフォー...

タブバーの切り替え効果を実現するJavaScript

タブバー: 異なるタブをクリックすると異なるコンテンツが表示され、クリックしたタブのスタイルが変更さ...

Dockerコンテナの接続と通信の実装

ポート マッピングは、Docker を別のコンテナーに接続する唯一の方法ではありません。 Docke...

MYSQLデータベーステーブル構造の最適化方法の詳細な説明

この記事では、例を使用して、MYSQL データベース テーブル構造を最適化する方法を説明します。ご参...

MySQLとElasticsearch間のデータ非対称性問題の解決策

MySQLとElasticsearch間のデータ非対称性問題の解決策jdbc-input-plugi...

mysql-joinsの具体的な使用方法

目次結合構文: 1. InnerJOIN: (内部結合) 2. LeftJOIN: (左結合) 3....

Linuxでディスク使用量を確認する方法

1. dfコマンドを使用してディスク全体の使用量を表示します。 df コマンドは、ハードディスクのマ...

MySQLは効率的なインデックス例分析を確立する

この記事では、例を使用して、MySQL で効率的なインデックスを作成する方法について説明します。ご参...

MySQL ステートメントを使用して、さまざまな整数が占めるバイト数とその最大値と最小値を調べる例

直接コード: タイプとして「bigint unsigned」、バイトとして「8」、max_numとし...

CSS を使用して半透明の背景と不透明なテキストを実現する例

この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...

HTMLにスクリプトを追加する2つの方法と注意点

HTML に <script> スクリプトを追加する方法: 1. HTMLにJavaSc...

表示しているページのスナップショットを Baidu が保存できないように設定する方法

今日、Baidu でページを検索したところ、ページが削除されていたため、当然 Baidu スナップシ...

よく使われるCSSカプセル化方法の概要

1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...

MySQL SQL ステートメントが遅い場合の一般的な原因と解決策

1. インデックス不足または無効なインデックスによるクエリの遅延数千万件のデータを含むテーブルで、イ...

CSS3 での 2D および 3D 変換の実装

CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使...