ビューカプセル化モード
Emulated、None、ShadowDomを比較します。
「ビューカプセル化モード」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
ビューのカプセル化とは
ビューのカプセル化は、コンポーネントのスタイルをページの他の部分からどのように分離するかを制御します。Angularでは、encapsulationプロパティを通じて3つのモードを利用できます。
モードの設定
@ComponentデコレーターでViewEncapsulation列挙型を使ってモードを設定します。
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-card",
encapsulation: ViewEncapsulation.Emulated
})
export class CardComponent {}Emulated（デフォルト）
Emulatedがデフォルトです。Angularは、ネイティブのShadow DOMを使わず、要素とセレクターに一意の属性を追加することで、スコープされたスタイルをシミュレートします。
@Component({
encapsulation: ViewEncapsulation.Emulated
})Emulatedの仕組み
Emulatedモードでは、生成された属性を使ってセレクターを書き換えます。これにより、Shadow DOMのサポートを必要とせず、すべてのブラウザーで機能するスコープを実現します。
/* you write */
.title { color: blue; }
/* angular emits */
.title[_ngcontent-xyz] { color: blue; }None
Noneはカプセル化を完全に無効にします。コンポーネントのスタイルはグローバルになり、ページ上のあらゆる要素に影響を与える可能性があります。
@Component({
encapsulation: ViewEncapsulation.None,
styles: [".title { color: red; }"]
})
// .title now applies app-wideNoneを使う場面
Noneは、たとえば1つのコンポーネントから共有テーマのルールを定義する場合などに、慎重に使用してください。スタイルがグローバルに競合する可能性がある点に注意が必要です。
ShadowDom
ShadowDomは、ブラウザーのネイティブShadow DOMを使って、コンポーネントのマークアップとスタイルを完全に分離します。
@Component({
selector: "app-widget",
encapsulation: ViewEncapsulation.ShadowDom
})
export class WidgetComponent {}ShadowDomの違い
ShadowDomでは、コンポーネントは実際のシャドウルート内にレンダリングされます。グローバルスタイルは内部に入り込まず、コンポーネントのスタイルも外部に漏れないため、最も強力な分離が実現します。
スタイルの漏れを比較する
Emulatedは外部への漏れを防ぎますが、グローバルスタイルから要素を対象にすることはできます。Noneには分離がなく、ShadowDomは両方向の影響を完全に遮断します。
モードの選択
ほとんどの場合はEmulatedを使用してください。完全に分離されたウィジェットにはShadowDomを使い、Noneは意図的にグローバルスタイルを定義する場合に限って使用します。
カプセル化とグローバルスタイル
グローバルなstyles.cssは、モードに関係なく常に適用されることを覚えておいてください。ただし、ShadowDomコンポーネントの内部にはグローバルスタイルは届きません。
クイックチェック
ビューのカプセル化モードについて理解度を確認しましょう。
まとめ
Angularには、Emulated（デフォルト。スコープをシミュレート）、None（グローバルスタイル）、ShadowDom（ネイティブな分離）の3つのカプセル化モードがあります。ほとんどの場合はEmulatedが適しており、ShadowDomは最も強力な分離を実現します。
よくある質問
「ビューカプセル化モード」レッスンは無料ですか？
はい。「ビューカプセル化モード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「ビューカプセル化モード」で何を学びますか？
Emulated、None、ShadowDomを比較します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「ビューカプセル化モード」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。