html模板本身不解决命名空间问题，仅提供可复用的dom片段；真正隔离依赖bem前缀、组件级class根节点限定、customelements.define()注册时机及构建时前缀注入等手动控制措施。
HTML模板本身不解决命名空间问题，它只是容器
HTML模板（<template></template>）不会自动给内部元素加前缀、隔离样式或避免class冲突。它只提供一个“不渲染但可复用”的DOM片段，所有命名空间问题仍需你手动控制。很多人误以为把组件包进<template></template>就天然隔离了，结果在多个组件共用class="btn"时照样撞车。
真正起作用的是你在模板里怎么写class、id、data-*和事件名——而不是模板标签本身。
-
<template id="user-card"><div class="user-card"><h3 class="user-card__name"></h3></div></template>✅ 用了BEM前缀，后续JS/CSS可限定在.user-card下操作 -
<template id="user-card"><div class="card"><h3 class="title"></h3></div></template>❌class="card"和class="title"泛化，一插入页面就可能覆盖全局样式 - 模板中用
data-id不如用data-user-id——前者在多组件混用时无法区分语义来源
用template + 根节点class实现BEM边界
模板内容被克隆后插入DOM，此时必须靠根元素的唯一class来划定样式和脚本的作用域。否则CSS会泄漏，JS会查到别的组件节点。
比如你从<template id="product-list"></template>克隆出内容，插入后必须确保外层包裹或自身带class="product-list"，然后所有CSS和JS都基于这个根class写：
const tpl = document.getElementById('product-list');
const frag = document.importNode(tpl.content, true);
const root = frag.querySelector('.product-list'); // 必须有且唯一
document.body.appendChild(frag);
// CSS写成 .product-list .product-list__item，不是 .product-list__item
// JS查子元素：root.querySelector('.product-list__item')
- 如果模板里没写
class="product-list"，克隆后就得手动补：root.classList.add('product-list') - 不能依赖
template的id做样式锚点——#product-list是模板节点ID，不随克隆内容一起走 - 根class名必须和模板ID一致或强关联，便于维护；不推荐
id="product-list"但里面写class="shop-product-grid"
模板中嵌入自定义标签时，破折号和注册时机不能错
如果你在<template></template>里写了<my-button></my-button>，它不会自动生效。浏览器只在解析HTML时触发自定义元素升级，而template.content是惰性解析的，里面的<my-button></my-button>属于“未升级节点”（unupgraded）。
- 必须先调用
customElements.define('my-button', MyButton)，再使用<template></template>，否则克隆后my-button.connectedCallback不执行 - 若模板已存在且
my-button未注册，克隆后得手动升级：customElements.upgrade(root)（传入克隆后的根节点） -
my-button必须含破折号，mybutton或MyButton会直接报DOMException: The element name is not valid - 别在
connectedCallback里靠this.localName.includes('my-')做逻辑分支——这破坏封装，也使组件无法跨项目复用
构建时注入前缀比运行时拼接更可靠
靠JS在克隆后遍历所有class、id、data-*属性加前缀，容易漏掉伪类、属性选择器、内联style里的引用，还拖慢首屏。真正防冲突的做法是在构建阶段处理。
- Webpack配
postcss-prefix-selector，把.btn→.app-cart-btn，模板中的class也一并改掉 - 用
html-loader+ 自定义loader，在读取<template></template>字符串时自动重写class/id（如匹配class="([^"]+)"并加前缀） - Go模板（
html/template）可结合{{define "user-card"}}...{{end}}和预编译脚本，在生成HTML前统一注入业务前缀 - 禁止在模板里写
style="color:red"——内联样式无法加前缀，应抽成CSS变量或class
最常被忽略的其实是localStorage键和CustomEvent类型：模板复用再多，只要localStorage.setItem('theme', ...)或dispatchEvent(new CustomEvent('submit'))没加前缀，多个组件依然会互相覆盖或误触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
