真正有效的解耦必须落在运行时行为边界上，即组件能独立挂载、响应、样式隔离，且不依赖外部class名、DOM路径或全局变量；Web Components是唯一原生解耦载体，需通过customElements.define()注册并调用attachShadow建立隔离层。
HTML组件化开发中解耦不是靠“把样式和JS分开写”就能实现的，真正有效的解耦必须落在运行时行为边界上——也就是说，组件得能独立挂载、独立响应、独立样式作用域，且不依赖外部 class 名、DOM 路径或全局变量。
Web Components 是唯一原生解耦载体
customElements.define() 注册的自定义元素，配合 connectedCallback 中 attachShadow({ mode: 'open' })，才能建立真正的隔离层。没调用 attachShadow，所有结构和样式仍在全局 DOM，任何外部 CSS 都可能穿透覆盖，querySelector 也能跨边界抓取内部节点。
- constructor 里不能操作 this.shadowRoot —— 此时它存在但 DOM 未挂载，this.shadowRoot.querySelector() 必然返回 null
- 禁止在 HTML 模板里写
onclick或data-action属性，那等于把行为契约暴露给外部 JS 扫描 - 想控制开关状态，该用
<my-button disabled>，而不是<my-button data-disabled="true"> - 第三方 CSS（如 Font Awesome）不能通过
<link>插入 document.head，必须提取 CSS 文本，用CSSStyleSheet+adoptedStyleSheets注入 shadowRoot
dataset 是轻量级解耦的实用入口
当不用 Web Components 时，dataset 提供了一层语义清晰、可预测的数据通道。它把配置从 HTML 属性转为 JS 可读对象，避免散落的 getAttribute 和硬编码 class 判断。
-
el.dataset.apiEndpoint自动转驼峰，比el.getAttribute('data-api-endpoint')更安全 - 数值字段要手动转：
Number(el.dataset.limit)；布尔字段必须用字符串比较：el.dataset.enabled === "true" - 事件委托必须靠 dataset 区分目标：
e.target.dataset.orderId，而不是给每个按钮单独绑定 click - 初始化配置统一从
document.body.dataset.appConfig提取，HTML 里只留<script src="main.js">
CustomEvent 仅适用于单页内轻量通信
它不能替代消息总线，也不跨 iframe 或 Shadow DOM。适合编辑器 + 预览区 + 控制台这类同文档、低耦合、无生命周期强依赖的场景。
立即学习“前端免费学习笔记（深入）”；
-
detail必须是 plain object，不能是字符串或 null，否则监听方解构会报错：{ type, payload }是安全结构 - dispatch 前必须确认目标存在：light DOM 用
document.getElementById()，shadow DOM 必须用this.shadowRoot.dispatchEvent() - iframe 里收不到主页面 dispatch 的 CustomEvent —— 它不跨 browsing context，得改用
postMessage+ 在 iframe 内转成 CustomEvent - 监听必须匹配冒泡路径：shadow 内 dispatch 默认不冒泡到 light DOM，需显式设
bubbles: true
真正难的不是选哪种技术，而是坚持不让 HTML 出现任何“可被 JS 硬编码识别的钩子”——比如 class 名、id、data-xxx 的业务语义值。一旦这些成为逻辑触发条件，解耦就退化成了文件物理分离。
