templateparameters仅传递静态数据，不校验html合法性，无法约束质量；真正有效的html质量控制需在构建时用html-validate、编辑时用ide插件、运行时用dompurify三重拦截。
html-webpack-plugin 的 templateParameters 不适合做 HTML 代码质量约束注入——它只传静态值，不校验、不 lint、不拦截非法标签或属性。
为什么 templateParameters 无法约束 HTML 质量
它本质是模板数据上下文，不是构建检查器。你传进去的字符串哪怕包含 <script>alert(1)</script> 或 <div onclick="eval('x')">，插件照单全收，毫无反应。<ul>
<li>
<code>templateParameters 在 Webpack 构建时执行，早于任何 HTML 解析或语义校验环节
Unknown attribute: data-xss-inject
title 是否含未转义的双引号或尖括号真正能注入质量约束的三个位置
HTML 质量必须在“写入前”或“加载前”拦截，而不是“渲染前”传参。
-
构建时：用 html-validate + webpack-html-validate-plugin —— 它会解析最终生成的 HTML 字符串，按 W3C 规则和自定义规则（如禁止
onclick、要求alt）报错，webpack --mode=production直接中断构建 -
编辑时：VS Code 配置 html-validate 插件 + .htmlvalidate.json —— 实时标红
<img src="a.jpg">（缺alt），比等 CI 报错快十倍 -
运行时：用 DOMPurify 处理动态插入内容 —— 对
innerHTML = userContent做净化，但仅适用于 JS 动态片段，不覆盖模板文件本身
如何让基础组件模板自带质量契约
把约束逻辑下沉到模板结构本身，而非靠外部工具“事后审计”。
- 所有基础组件模板（如
card.html）开头强制声明校验元信息：<!-- @html-validate enable: no-inline-style, require-alt --> - 用
<template id="c-button"></template>包裹组件，内部禁止出现style=""、onclick、javascript:，这些在html-validate规则里设为 error 级别 - 组件 JS 工厂函数（如
createButton({ label })）返回前，用DOMPurify.sanitize()过一遍 fragment，确保data-bind填充后不引入新风险 - 禁用
innerHTML +=拼接，改用container.append(fragment)—— 避免触发浏览器对已挂载节点的重解析，绕过部分校验
真正难的不是加一条 lint 规则，而是让每个 <template></template> 文件从被创建那一刻起，就带有一份可执行、可继承、不依赖构建环境的质量承诺。这需要把约束变成模板的 DNA，而不是贴在构建流水线上的临时胶带。
