html-webpack-plugin通过templateParameters在构建时注入动态数据，支持EJS等模板语法，但仅限构建期静态值（如环境变量、版本号），不支持运行时更新。
html-webpack-plugin 怎么注入动态数据到模板
它不直接支持运行时数据绑定，只在构建阶段把变量塞进 HTML 字符串里。你写 ，Webpack 打包时就替换成实际值，之后页面加载完就固定了。
常见错误现象：想用 在用户登录后更新标题——不行，这行代码早在打包时就被替换成空字符串或默认值。
使用场景限于构建时已知的信息，比如环境变量、版本号、多页应用的页面名称：
- 通过
templateParameters选项传入对象，字段会变成模板上下文 - EJS 模板里用
，Pug 里用#{version}，语法因引擎而异 - 多个实例对应不同页面时，每个
new HtmlWebpackPlugin({...})可传独立参数
注意：如果模板里写了 <script>console.log(<%= JSON.stringify(data) %>)</script>，要确保 data 是安全序列化的纯对象，否则可能产生语法错误或 XSS。
Web Components 的自定义标签如何与现有 HTML 混用
可以，但得注意解析时机和 DOM 就绪状态。浏览器遇到未注册的 <my-card></my-card> 标签时，会当成普通 HTMLUnknownElement 渲染，样式和行为都不可用，直到 customElements.define() 执行完毕。
常见错误现象：组件 JS 放在 <body> 底部，但模板里 <my-card></my-card> 已出现在 DOM 中，导致初始化失败或样式错乱。
实操建议：
- 确保
customElements.define()在所有<my-card></my-card>出现前执行，推荐放在<head>里的<script defer>或模块脚本中 - 不要依赖
connectedCallback里访问this.innerHTML—— 若模板含<slot>，内容可能还没分布完成，改用slotchange事件监听 - Shadow DOM 内部无法用外部 CSS 选中，若需主题适配，暴露
:host([theme="dark"])这类属性钩子，而非指望父级 class 生效
mp-html 插件里怎么修改解析后的 DOM 结构
靠 onParse 钩子拦截标签，返回新结构。它发生在 HTML 字符串转成虚拟节点的过程中，不是操作真实 DOM，所以不能用 querySelector 或 appendChild。
常见错误现象：在 onParse 里写 document.querySelector('.x') —— 此时 DOM 还没生成，必然返回 null。
实操建议：
- 匹配
tag.name === 'img'后，可返回{ name: 'wx:img', attrs: { ... } }替换为小程序原生组件 - 想给所有
<p>加个 wrapper？返回一个包含{ name: 'div', children: [originalTag] }的对象 - 若需根据内容改结构（比如识别 markdown 表格），
onUpdate更合适，它接收原始 HTML 字符串，可用正则预处理
动态加载 HTML 片段时 script 标签为什么不执行
浏览器只执行内联 <script> 或带 src 的脚本，当用 fetch 拿回 HTML 字符串再用 innerHTML 插入时，其中的 <script> 标签会被忽略——这是规范行为，不是 bug。
常见错误现象：把导航栏存成 navbar.html，里面写了 <script>console.log('loaded')</script>，插入后完全没反应。
实操建议：
- 把逻辑抽成函数，外链 JS 文件统一管理，片段里只留结构，加载完再手动调用
- 若必须内联，用
DOMParser解析字符串，遍历script节点，用eval()或创建新<script>标签并 append 到 head（注意 CSP 限制） - 更稳妥的做法是放弃“纯 HTML 片段”，改用 ES 模块封装，
import('./components/navbar.js').then(mod => mod.render())
.my-button::part(icon) 却忘了在组件里暴露 exportparts="icon"；又比如 html-webpack-plugin 配了多页，却把公共 JS 提取成 vendor.js，结果某页没引入，功能就断了。这些都不是工具不会，而是边界没划清。 
