自定义标签名必须含短横线，如my-component；template仅占位不执行脚本；属性顺序与双引号需规范；禁止硬编码id，应使用data-id或动态生成唯一id。
自定义标签名必须含短横线，否则解析器无法识别
浏览器靠短横线（-）区分标准元素和自定义元素。写成 mycomponent 或 MyComponent，HTML 解析器会当成未知的普通标签，既不触发自定义元素生命周期，也无法被 customElements.define() 注册成功。
正确写法只有两种：my-component、x-button；错误写法包括：mycomponent、MyComponent、my_component、myComponent。
Vue 单文件组件中虽不强制要求标签名含短横线（因通过 components 注册），但若需导出为原生自定义元素（defineCustomElement），仍必须遵守该规则，否则构建时会静默失败或运行时报 Failed to execute 'define' on 'CustomElementRegistry'。
template 标签只是占位符，不自动隔离也不执行脚本
很多人把子应用 HTML 塞进 <template id="cart"></template> 就以为“模块化”了，其实它什么也没做：不渲染、不执行 JS、不隔离样式、不阻止 DOM 查询穿透。
常见后果包括：
- 子应用
<div class="header"> 被主应用的 <code>.header { margin-top: 20px }修改样式 - 多个子应用都用了
id="modal"，document.getElementById('modal')返回第一个匹配项，逻辑错乱 -
<script>console.log('init')</script>在克隆后插入 DOM，根本不会执行 idclass-
ref（Vue）或data-*（通用） -
src/href/for/type -
title/alt -
aria-*/role - 布尔属性（如
disabled、required）不带值 - 用
data-id替代：<div data-id="user-modal">，JS 中用 <code>querySelector('[data-id="user-modal"]') - 运行时生成唯一 ID：
<div :id="\`modal-\${Date.now()}-\${Math.random().toString(36).substr(2, 9)}\`">，适合需要真实 <code>id的场景（如label[for]关联）Vue 中更推荐用
ref获取 DOM 引用，而非依赖id查询——这既是响应式设计的要求，也是规避全局命名污染的底线。
真正安全复用模板的唯一方式是：document.importNode(tmpl.content, true) —— 它能保留表单状态（checked、value）、不丢事件监听器，且是 Shadow DOM 场景下兼容性最好的克隆方法。
属性顺序与引号使用影响可维护性与工程一致性
HTML 属性不是随意排列的字符串，顺序混乱会导致 diff 工具误判、团队协作时难以快速定位关键配置。
推荐顺序（从高优先级到低）：
引号统一用双引号：<input type="text" class="form-input" data-id="123">；嵌套字符串才切换单引号，比如：:title="'当前状态：" + status + "''。混用或漏引号在 ESLint + Prettier 配置下会被直接报错，CI 流水线卡住。
组件内禁止硬编码 id，data-id 或动态生成唯一标识才是解法
硬写 id="user-modal" 是前端工程化的大忌：跨实例冲突、SSR 渲染不一致、服务端与客户端 DOM 不匹配（hydration error）、自动化测试难 mock。
替代方案有且只有两个：
