HTML自定义元素需手动触发格式化，关键在attributeChangedCallback监听data-*属性变化并配合observedAttributes声明；注意dataset类型陷阱，须显式转换；写回时优先textContent或DOMPurify过滤innerHTML以防XSS。
HTML 自定义元素本身不提供自动数据格式化能力，它只是个容器和生命周期钩子；真正做格式化的，是你在 connectedCallback 或属性变更时手动调用的逻辑（比如 Intl.NumberFormat、moment 或正则）。别指望自定义标签自己“懂格式”。
自定义元素里怎么触发格式化？关键在 attributeChangedCallback
你得主动监听 data-value、data-format 这类属性变化，而不是等用户输入完再处理。否则首次渲染或动态更新时会漏掉格式化。
- 必须在
observedAttributes静态 getter 中声明要监听的属性，比如return ['data-value', 'data-format'] -
attributeChangedCallback里判断属性是否真实变更（注意：初始值为null，首次设值会触发，但设空字符串也会触发） - 格式化逻辑建议封装成独立函数，避免和 DOM 操作混在一起，方便单元测试
data-* 属性传数字还是字符串？小心类型陷阱
dataset 只返回字符串，哪怕你写 data-value="3.14159"，读出来也是 "3.14159"。直接丢给 Intl.NumberFormat 会报错，必须先 parseFloat() 或 Number()。
- 布尔类格式控制（如
data-show-unit="true"）也要显式转Boolean()，因为dataset.showUnit === "false"会被当成真值 - 日期类值（
data-value="2026-06-23"）建议用new Date(dataset.value)构造，别依赖字符串解析 - JSON 类数据（
data-options='{"minimumFractionDigits":2}'）需JSON.parse()，且要加try/catch
格式化后怎么安全写回 innerHTML？避开 script/style/pre
如果你把格式化结果直接塞进 this.innerHTML = formatted，而用户恰好传了 <script>alert(1)</script>，那就 XSS 了。更糟的是，如果元素里本来有 <pre> 或 <script> 子节点，整个结构会被清空重写。
立即学习“前端免费学习笔记（深入）”；
- 优先用
this.textContent = formatted，适用于纯文本场景（如金额、日期显示） - 若需保留简单 HTML（比如加
<span class="unit">¥</span>），用this.innerHTML = formatted前先用DOMPurify.sanitize()过滤 - 绝对不要在
<pre>、<script>、<style>内部使用自定义格式化元素——它们的文本内容不该被 DOM 解析器二次处理
最常被忽略的点：格式化不是一次性动作。当父组件用 innerHTML 替换整个区域时，你的自定义元素会被销毁重建，所有状态丢失。如果格式依赖外部配置（比如 locale），得在 connectedCallback 里重新拉取或监听 context 变化，不能只靠初次属性设置。
