HTML模板是否符合设计系统标准，取决于语义标签准确性、自定义属性统一性、DOM结构可预测性；需用html-validate和Playwright自动化校验，规避template/slot/Shadow DOM导致的静态分析盲区。
怎么判断 HTML 模板是否符合设计系统标准
模板是否达标，不看结构多漂亮，而看它能不能被组件库、构建工具和 QA 工具稳定识别和校验。核心是三件事：语义标签是否准确、自定义属性是否统一、DOM 结构是否可预测。
-
class名必须遵循设计系统约定（如Banner--size-large而非banner-big），且禁止内联样式或style属性 - 所有交互元素必须有明确的
role、aria-属性（如aria-expanded控制折叠状态），不能靠 JS 动态注入 - 禁止使用非标准属性名（如
data-comp-type应统一为data-component），否则 CSS-in-JS 或自动化扫描会漏检
用什么工具自动化验收 HTML 模板质量
人工逐行核对效率低且易漏，真正可用的是基于 AST 或 DOM 的静态检查链路，不是浏览器插件或截图比对。
- 用
html-validate配合自定义规则集，例如校验button是否缺失type="button"，或img是否缺alt - 用
playwright启动无头 Chromium 加载模板，执行document.querySelectorAll('[data-component]')并断言数量/属性值，验证组件注册一致性 - 禁止依赖
innerHTML字符串匹配——模板里换行缩进或注释变动就会导致误报
为什么 template 标签和 slot 会影响验收结果
它们让 HTML 变成“运行时才展开”的结构，静态分析工具看不到真实 DOM，直接导致规则失效或覆盖率下降。
- 若模板含
<template><div data-component="card"></div></template>，html-validate默认不解析其内容，需额外配置parse-script-tags: true和自定义解析器 -
<slot>内容由父组件注入，验收时必须提供最小上下文环境（如 mock 的slotfallback 内容），否则无法校验最终渲染结构 - Shadow DOM 中的模板需用
shadowRoot.querySelector单独提取，主流 Linter 默认不进入 shadow boundary
验收失败时最常卡在哪些地方
不是语法错，而是设计系统落地时的隐性约束没显式编码进模板，比如响应式断点绑定、主题色变量注入时机、无障碍焦点顺序。
立即学习“前端免费学习笔记（深入）”；
-
data-breakpoint值写成"md"但系统只认"medium"—— 字符串枚举未做校验，CI 里跑不过 - 主题类名如
Theme--dark必须出现在<html>上，但模板只写了<div class="Card Theme--dark">，导致 CSS 变量未生效 - 键盘导航要求
tabindex="-1"元素必须有aria-hidden="true"，但设计师给的 Sketch 切图没标这个，开发容易漏
真正难的不是写对一行 HTML，而是让每个属性都承载可验证的设计契约。一旦某个 data- 属性含义模糊，或者某个 class 名存在多义性，自动化验收就退化成人工抽查。
