HTML组件隔离需统一采用BEM命名、业务前缀、作用域限定和封装机制：class/id加组件前缀，localStorage键拼接业务前缀，自定义事件加组件标识，全局变量纳入命名空间，CSS/JS选择器限定在组件根节点内。
HTML组件开发中不存在原生命名空间机制，所有隔离都靠人为约定和结构约束；不加隔离的 class、id、localStorage 键、自定义事件名、全局变量，迟早会撞车。
class 和 id 必须带组件级前缀
HTML 没有模块作用域，class="title" 或 id="modal" 这类泛化名在多组件共存时必然冲突。BEM 是最轻量且可落地的解法：
- 根元素用唯一 block 名：
class="user-profile"，不是class="profile" - 子元素严格用双下划线：
class="user-profile__avatar"，不用user-profile-avatar（易与其它连字符命名混淆） - 状态修饰符用双短横：
class="user-profile--loading"，避免is-loading这类通用前缀——它无法绑定到具体组件 - 禁止在 class 中塞样式描述：
class="big-red-text"会随主题变更失效；class="user-profile__heading"才可持续
localStorage 键必须拼接业务前缀
localStorage 是全局键值对，setItem("theme", "dark") 和第三方脚本写 "theme" 会互相覆盖。不能靠“别人别乱写”来防御：
- 项目启动时定义常量：
const STORAGE_PREFIX = "myapp_v3_user-profile_"; - 所有读写强制走前缀：
localStorage.setItem(`${STORAGE_PREFIX}last-viewed`, "2026-05-01"); - 避免手动拼字符串出错：封装成函数或类，内部自动补前缀，调用时只传逻辑键名
- 不推荐把多个字段合并进单个 key（如
"user-state"），除非它们总是一起读写；否则更新一个字段要重写整个对象，增加竞态风险
自定义事件和全局变量必须限定作用域
组件发 new CustomEvent("submit")，其他组件监听同名事件就会误收；挂 window.initWidget 也可能被覆盖：
立即学习“前端免费学习笔记（深入）”；
- 事件类型加组件标识：
"user-profile:submit"、"user-profile:load-error"，冒号分隔比连字符更易区分层级 - 全局变量全包进命名空间对象：
window.UserProfile = { init(), destroy(), config: {} };，而不是零散挂window.init、window.userConfig - 立即执行函数（IIFE）仍是插入第三方代码片段的安全兜底：
(function() { /* 私有变量和函数 */ })(); - 避免用
document.querySelector(".btn")这类无上下文的选择器；限定在组件根节点内：rootEl.querySelector(".user-profile__submit-btn")
CSS 和 JS 的隔离边界必须对齐
只改 class 名但 JS 还用 document.getElementById("modal")，或 CSS 写了 .user-profile__header 但 HTML 漏了前缀，隔离就形同虚设：
- 组件根元素必须有唯一 class（如
class="user-profile"），所有子元素 class 都基于它派生 - JS 初始化时只查找该根元素下的后代：
const root = document.querySelector(".user-profile[data-id='123']");，用data-id区分多个实例 - 不要依赖外部样式重置（如全局
button { margin: 0 }），组件内用.user-profile__submit-btn { margin: 0.5rem; }显式声明 - 如果用 Web Components，Shadow DOM 是终极隔离，但需权衡兼容性和构建复杂度；普通场景，BEM + 前缀 + 封装已足够
真正难的不是写对一个组件，而是保证所有组件遵守同一套前缀规则、同一套事件命名习惯、同一套存储键构造逻辑——一旦某人绕过封装直接操作 localStorage 或发裸事件，整个隔离体系就从那个点开始瓦解。
