ホームページ > ウェブフロントエンド > CSSチュートリアル > 私の CSS が Angular の InnerHTML コンテンツに適用されないのはなぜですか?

私の CSS が Angular の InnerHTML コンテンツに適用されないのはなぜですか?

Patricia Arquette
リリース: 2024-10-27 05:27:03
オリジナル
486 人が閲覧しました

Why Doesn't My CSS Apply to InnerHTML Content in Angular?

Angular では CSS が InnerHTML コンテンツに適用されないのはなぜですか?

Angular では、innerHTML プロパティを使用して HTML コンテンツをビューに挿入すると、問題: スタイルが期待どおりに適用されない可能性があります。これは、外部スタイルがコンポーネント内のコンテンツに干渉するのを防ぐ Angular のカプセル化メカニズムによるものです。

Shadow DOM カプセル化について

デフォルトでは、Angular はエミュレートされたカプセル化を使用します。 Shadow DOM を作成し、コンポーネント スタイルを分離します。したがって、コンポーネントのスコープ外、innerHTML によって挿入された HTML 内で定義されたスタイルは無視されます。

解決策: カプセル化をなしに変更します

この問題を解決するには、コンポーネントでカプセル化を None に設定することで、Angular のカプセル化をオーバーライドできます。これにより、外部ソースからのスタイルを、挿入された HTML コンテンツに適用できるようになります。

例は次のとおりです:

<code class="typescript">import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'example',
  styles: ['.demo {background-color: blue}'],
  template: '<div [innerHTML]="someHtmlCode"></div>',
  encapsulation: ViewEncapsulation.None,
})
export class Example {
  someHtmlCode = `<div class="demo"><b>This is my HTML.</b></div>`;
}</code>
ログイン後にコピー

カプセル化を None に設定することで、Angular のシャドウ DOM を無効にし、CSS を許可します。挿入された HTML 内で有効になります。その結果、挿入された HTML div 内のテキストは青色の背景色でレンダリングされます。

以上が私の CSS が Angular の InnerHTML コンテンツに適用されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート