angular 默认拦截未标记为可信的 innerhtml 赋值以防御 xss，导致空白渲染或警告；safehtml 管道仅支持静态 html，不解析 angular 指令；动态组件必须用 createcomponent() 而非字符串注入。
直接 innerHTML 赋值会触发 Angular 的安全拦截
Angular 默认阻止任何未标记为“可信”的 HTML 字符串写入 innerHTML，你看到的空白或控制台警告 WARNING: sanitizing HTML stripped some content 就是它在起作用。这不是 bug，而是框架主动防御 XSS 的默认行为。
常见错误现象包括：
- 页面显示为空白，但 DOM 中有
innerHTML绑定却没渲染 - 控制台出现
WARNING: sanitizing HTML stripped some content或ERROR: unsafe value used in a resource URL context - 动态插入的
<mat-expansion-panel></mat-expansion-panel>标签原样输出为纯文本，不初始化、无样式、无动画
根本原因：Angular 编译器不会解析运行时拼接进来的 HTML 字符串里的指令、绑定或组件标签——它只处理模板编译阶段已知的结构。
所以别试图用 element.innerHTML = '<mat-card>...</mat-card>' 去“注入组件”，这条路从设计上就走不通。
safeHtml 管道只适用于静态 HTML，不支持 Angular 指令
如果你只是渲染一段完全可信、不含任何 Angular 语法（比如 {{ }}、*ngIf、mat-*）的纯 HTML 片段（例如 CMS 输出的富文本），SafeHtmlPipe 是安全且有效的方案。
但要注意几个关键限制：
-
DomSanitizer.bypassSecurityTrustHtml()只解除 XSS 过滤，不触发 Angular 的模板编译流程 - 传入的字符串中若含
<mat-button></mat-button>或<app-user-card></app-user-card>，这些标签会被当作普通元素渲染，不会实例化组件、不执行生命周期钩子、不绑定输入输出 - 无法响应式更新：管道返回的是
SafeHtml对象，不是可重渲染的视图上下文 - 样式仍受 ViewEncapsulation 影响，若组件 CSS 是
Emulated模式，外部注入的 HTML 不会自动获得对应 class 修饰
示例中这样写是安全的：<div>Hello <strong>world</strong>' | safeHtml"></div>；但这样无效：<div>
<mat-card-title>{{title}}</mat-card-title>' | safeHtml"></div>。
需要动态加载组件？必须用 ComponentFactoryResolver 或 createComponent（Angular ≥13）
真正要让 mat-expansion-panel 或自定义组件在运行时被创建、初始化、绑定数据并参与变更检测，唯一正解是通过 Angular 的动态组件机制。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
Angular ≥13 推荐使用 createComponent() API（取代已废弃的 ComponentFactoryResolver）：
- 目标容器必须是
ViewContainerRef，不能是普通 DOM 元素 - 组件类需显式声明在
entryComponents（旧版）或模块的bootstrap/declarations中（新版） - 输入属性需手动赋值：
ref.instance.title = 'Dynamic Panel'，再调用ref.changeDetectorRef.detectChanges() - 无法直接从 HTML 字符串解析出组件树——你得知道要创建哪个组件类，并构造它的实例
这意味着：你不能把一整段含多个 mat- 标签的 HTML 字符串喂给 Angular，让它“自动识别并渲染”。你必须拆解语义，映射到具体组件类型，再逐个创建。
第三方 HTML 注入必须隔离样式与脚本执行上下文
当你向宿主页面注入第三方 HTML（如 CMS 提供的营销模块），最大的风险不是 XSS，而是 CSS 冲突和脚本污染。Bootstrap 的 .btn、Foundation 的 .grid-row 会覆盖全局样式，第三方 JS 可能篡改 window 或劫持事件。
Shadow DOM 是目前最可靠、标准兼容的隔离方案：
- 用
element.attachShadow({ mode: 'open' })创建独立 DOM 子树 - 将 HTML 字符串解析为节点后 append 到
shadowRoot，而非element本身 - 把第三方 CSS
<style>...</style>直接注入shadowRoot，它不会泄漏到主文档 - 第三方脚本需额外处理：禁用
<script></script>执行（用 DOMParser + 过滤）、或用iframe sandbox隔离
注意：mode: 'closed' 会让调试变困难，生产环境可用；mode: 'open' 允许 DevTools 查看 shadow root，更利于排查。
真正的难点不在“怎么注入”，而在“怎么定义边界”：哪些样式该透出（如字体继承）、哪些事件该冒泡（如点击通知宿主）、哪些全局变量该代理（如 window.fetch）。这些都得靠显式设计，没有银弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
