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 名存在多义性,自动化验收就退化成人工抽查。



















