真正能落地的只有构建时静态检查 + 运行时属性拦截双轨机制：构建时用 eslint 插件校验 html 质量，运行时在 attributechangedcallback 中拦截非法 class/id/data-* 属性并告警。

直接在基类里加 HTML 质量校验逻辑，既不能拦截已渲染的 DOM，也拦不住模板字符串拼接——真正能落地的只有构建时静态检查 + 运行时属性拦截双轨机制。

为什么基类 constructor 里做 innerHTML 拦截根本无效

很多人试图在自定义元素基类的 constructor 中重写 innerHTML setter，或监听 connectedCallback 后遍历子节点做 class/id 校验。这看似主动，实则失效：

• DOM 已完成解析和样式计算，class="btn" 冲突、id 重复、data-* 命名不规范等问题早已污染全局作用域
• innerHTML = htmlString 是同步操作，拦截点必须在赋值前（比如模板编译阶段），而非 DOM 挂载后
• 第三方库（如 Ant Design）注入的 <style></style> 不经过你的基类，adoptedStyleSheets 也管不了它

真正起效的两个拦截层：构建时 + 运行时

HTML 质量约束必须分层嵌入，缺一不可：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 构建时层：用 ESLint 插件 eslint-plugin-html + 自定义规则校验 class 是否首位、id 是否唯一、data- 是否小写短横线、属性值是否双引号包裹。CI 流程中失败即阻断发布
• 运行时层：在基类 attributeChangedCallback 中拦截 class、id、data-* 属性变更，对非法值抛警告（非报错），并记录到 window.__htmlLintLog 供调试面板查看
• 禁止在基类中尝试修复值（如自动补引号、重排属性顺序），这会掩盖真实问题，且与 SSR 渲染结果不一致

data-* 属性校验最容易被绕过，但恰恰最危险

团队常以为 data-testid 或 data-track 只是“标记”，不影响功能。实际上：

• 未校验的 data-user-id="123" 会被 el.dataset.userId 正确读取，但 data-userID="123" 就变成 undefined —— 因为 dataset 自动驼峰转换只认短横线分隔
• data-config='{"theme":"dark"}' 是合法的，但 data-config={theme: "dark"}（无引号+对象字面量）会触发 HTML 解析器截断，导致后续属性丢失
• 构建时规则必须覆盖所有 data-*，而不仅是白名单里的几个；运行时拦截应拒绝以数字开头的 key（如 data-1st-item），旧版 Safari 会静默忽略

复杂点不在代码怎么写，而在“谁负责触发校验”——构建时靠 CI 卡口，运行时靠基类暴露可配置开关（如 enableHtmlLint: true），但默认关闭。开着它跑生产环境？别试。它只该出现在 devtools 面板里，作为调试辅助，不是防御墙。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！