Angular动态innerHTML内容样式未生效，如何正确应用自定义样式？

我有一个名为ExternalHtmlComponent的Angular组件，负责渲染从后端获取的HTML内容，该内容通过[innerHTML]属性绑定动态插入到div元素中。为给动态插入的HTML内容设置样式，我在components/external-html.scss文件中定义了名为external-html的mixin，但这些样式并未应用到对应的HTML标签上。请问如何确保external-html.scss中定义的所有样式能正确应用到动态插入的HTML元素内？

现有代码 #

components/external/external_html.component.ts #

import {Component, ViewEncapsulation, Input, OnInit} from '@angular/core';

@Component({
  selector: 'component-external-html',
  template: '<div [innerHTML]="html"> </div>',
  styleUrls: ['./external-html.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ExternalHtmlComponent {

  @Input() html: string;

  constructor() { }

}

components/external/external_html.component.scss #

@import "components/external-html";

:host {
  @include external-html;
}

components/external-html.scss #

@mixin external-html {
    font: var(--font-body);
    color: var(--color-text); // 只有这两个样式生效，其他样式无法应用
    // 如果在这里加背景色，<a>标签会继承到

    h1 {
        font: var(--font-subtitle);
    }
    
    h2 {
        font: var(--font-label-bold);
        text-transform: uppercase;
        color: var(--color-secondary);
    }
    
    h3 {
        font: var(--font-emphasis);
    }
    
    b, strong {
        font: var(--font-body-semibold);
        background-color: red;
    }
    
    a {
        font: var(--font-body-semibold);
        color: var(--color-primary);
        text-decoration: underline;
    }
    
    blockquote {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-2);
        border-radius: var(--border-radius-2);
        background-color: var(--color-primary-05);
    }
}

使用示例 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-external-html-example',
  template: '<component-external-html [innerHTML]="exampleHtmlContent"></component-external-html>',
})
export class ExternalHtmlExampleComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  public exampleHtmlContent: string = `
  <h1>This is a Heading 1</h1>
  <h2>This is a Heading 2</h2>
  <h3>This is a Heading 3</h3>
  <p>This is a paragraph with <b>bold</b> text.</p>
  <a href="#">This is a link</a>
  <ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
  </ul>
  <ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
  </ol>
  <blockquote>
    This is a blockquote with background color, padding, and rounded corners.
  </blockquote>
`;

}

问题原因 #

当前代码把external-html mixin应用到了:host（组件的宿主元素）上，而动态插入的HTML内容是放在组件模板的<div>内部。Mixin里的子选择器（如h1、blockquote）只会匹配:host的直接子元素，但动态HTML的标签是<div>的子元素，属于:host的孙元素，所以这些样式无法命中目标元素。

只有font和color生效是因为这两个是可继承CSS属性，会从:host元素自动继承到内部所有元素；而像h1的字体、blockquote的布局样式属于非继承属性，必须直接选中目标元素才能生效。

解决方案 #

方案1：修改组件SCSS，将Mixin应用到内部的div #

把external_html.component.scss中的:host替换为:host > div，让Mixin的样式直接作用于承载动态HTML的div元素，这样Mixin里的子选择器就能匹配到div内部的所有标签：

@import "components/external-html";

:host > div {
  @include external-html;
}

方案2：修改Mixin的选择器层级 #

在Mixin的所有子选择器前添加&（代表父选择器），确保样式能匹配到父元素下的所有子元素（包括动态HTML里的标签）：

@mixin external-html {
    font: var(--font-body);
    color: var(--color-text);

    & h1 {
        font: var(--font-subtitle);
    }
    
    & h2 {
        font: var(--font-label-bold);
        text-transform: uppercase;
        color: var(--color-secondary);
    }
    
    & h3 {
        font: var(--font-emphasis);
    }
    
    & b, & strong {
        font: var(--font-body-semibold);
        background-color: red;
    }
    
    & a {
        font: var(--font-body-semibold);
        color: var(--color-primary);
        text-decoration: underline;
    }
    
    & blockquote {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-2);
        border-radius: var(--border-radius-2);
        background-color: var(--color-primary-05);
    }
}

两种方案都能解决问题，推荐方案1，因为不需要修改Mixin的结构，更符合组件样式的作用域规范。

内容的提问来源于stack exchange，提问作者Saidamir