القائمة
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);
}