在 Astro 组件中，直接插入含 HTML 标签的字符串（如 <strong>特征</strong>）默认会被转义为纯文本；需使用 set:html 指令显式声明信任该内容，才能将其解析为真实 DOM 节点。
在 astro 组件中，直接插入含 html 标签的字符串（如 `特征`）默认会被转义为纯文本；需使用 `set:html` 指令显式声明信任该内容，才能将其解析为真实 dom 节点。
Astro 默认对插值表达式（如 {item}）执行 HTML 转义，这是出于安全考虑——防止 XSS 攻击。因此，即使你在 characteristics 数组中传入类似 "<strong>免运费</strong>" 的字符串，Astro 也会原样输出为文本，而非加粗的 HTML 元素。
要正确渲染 HTML 字符串，必须使用 Astro 的 set:html 指令：
---
const { title, subtitle, characteristics } = Astro.props;
---
<p class="title">{title}</p>
<p class="subtitle">{subtitle}</p>
{characteristics?.map((item) => (
<p class="text" set:html={item}></p>
))}✅ 正确示例（在 .astro 文件中）：
<Plan
title="基础套餐"
subtitle="适合个人开发者"
characteristics={[
"<strong>无限带宽</strong>",
"支持 <code>WebSockets</code>",
"每月 <em>10 万次 API 调用</em>"
]}
/>⚠️ 重要注意事项：
立即学习“前端免费学习笔记（深入）”；
- set:html 会绕过转义机制，直接将字符串注入 DOM —— 仅限可信内容使用。若 characteristics 来自用户输入或外部 API，务必先进行 HTML 清洗（例如使用 DOMPurify.sanitize()），否则存在严重 XSS 风险。
- 不推荐在 set:html 中嵌入复杂结构（如 <script>、<iframe> 或事件处理器），Astro 不会执行其中的 JS，且可能引发安全或渲染异常。
- 若只需简单格式化（如加粗、斜体），更安全的替代方案是：将富文本语义拆解为结构化数据（如 [{ type: 'bold', text: '免运费' }]），再在组件内映射为对应标签。
总结：set:html 是 Astro 中渲染动态 HTML 字符串的标准方式，但其本质是“信任即渲染”。请始终遵循“最小权限”原则——只对已验证、受控的 HTML 内容启用该指令。
