菜单
HTML safety processing using html() function with DOMPurify. Invoke when inserting HTML content into components or debugging DOMPurify-related issues.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
@attribute decorator for defining HTML attribute-mapped properties. Invoke when creating or updating component attributes that map to HTML attributes.
@property decorator for defining pure JavaScript properties that do NOT map to HTML attributes. Invoke when creating internal component state properties.
BEM SCSS mixins for component styling. Invoke when writing or updating component SCSS styles using block/element/modifier/state mixins.
Component CSS styling standards including variables, host styles, states, and responsive patterns. Invoke when creating or updating component SCSS files.
@CustomElement decorator for registering Web Components. Invoke when creating new components or modifying component registration options.
Component documentation generation. Invoke when writing or updating component documentation including API tables, examples, and usage guides.
| name | html-safe |
| description | HTML safety processing using html() function with DOMPurify. Invoke when inserting HTML content into components or debugging DOMPurify-related issues. |
使用 html() 函数安全地处理 HTML 内容，防止 XSS 攻击。
import { html } from "@utils/html";
const html = (dirtyHTML: string): string
<slot> 标签：先用占位符 ___SLOT_N___ 替换所有 <slot> 和 </slot> 标签USE_PROFILES: { html: true, svg: true, svgFilters: true }CUSTOM_ELEMENT_HANDLING：
tagNameCheck: /^ea-/ — 允许所有 ea- 前缀的自定义元素标签attributeNameCheck: /.*/ — 允许自定义元素上的所有属性名allowCustomizedBuiltInElements: true<slot> 标签：将占位符替换回原始的 <slot> 标签@attribute({
type: String,
default: "",
observer(this: EaAlert, newVal: string) {
this._container.innerHTML = html(newVal);
},
})
content: string = "";
html(): string {
return `
<div class="${bem()}" part="container">
<div class="${bem.e('body')}">${html(this.content)}</div>
<slot></slot>
</div>
`;
}
在 JSDOM 测试环境中，DOMPurify 对某些属性（如 srcset）的处理比浏览器更严格，可能导致属性被清洗掉。
html() 函数处理包含该属性的 HTML 字符串data: URI（这类 URI 在 JSDOM 中可能被过滤）使用 DOM API 替代 HTML 字符串：
// ❌ 不推荐：HTML 字符串可能被清洗
private _loadImage(src: string): void {
this._container.innerHTML = html(
`<img src="${src}" srcset="${this["src-set"]}" />`
);
}
// ✅ 推荐：使用 DOM API 设置属性
private _renderImage(src: string): void {
const img = document.createElement("img");
img.src = src;
img.srcset = this["src-set"];
this._container.innerHTML = "";
this._container.appendChild(img);
}