直接写 innerhtml + 字符串拼接会破坏解耦，因 html 字符串混杂数据、结构、样式及内联事件，导致 js 逻辑依赖 dom 层级或 class 名，无法静态分析、ide 跳转或 seo 提取，实为编写“可执行字符串”而非视图。
为什么直接写 innerHTML + 字符串拼接会破坏解耦
因为 HTML 字符串里混着数据、结构、样式甚至内联事件（比如 onclick="handleClick()"），JS 逻辑被迫从 DOM 层级或 class 名里“猜”行为意图。一旦 class 名动态生成（如 css-abc123），或结构微调，整个绑定就断掉。
更关键的是：这种写法让模板无法被静态分析、IDE 无法跳转、翻译/SEO 工具无法提取语义——你不是在写视图，是在写“可执行的字符串”。
- 避免在模板字符串里写
onclick、onchange等属性，所有交互必须由组件类内部用addEventListener绑定 - 禁止用
data-action="submit"这类标记传递逻辑契约；要用标准属性（如disabled）或自定义属性配合observedAttributes - 如果必须条件渲染，用 JS 控制
if/else分支，而不是把${user.isAdmin ? '<button>删用户</button>' : ''}塞进模板里
Web Components 中 <template></template> 的正确加载时机
<template></template> 标签本身不渲染，但很多人误以为只要写了它，浏览器就会自动“识别并复用”。实际必须手动克隆、注入，且只能在 connectedCallback 中操作 this.shadowRoot。
在 constructor 里访问 this.shadowRoot 会得到 null；在 disconnectedCallback 里改 DOM 则无效——这些是 Web Components 生命周期的硬约束。
- 模板内容必须用
tmpl.content.cloneNode(true)克隆，直接appendChild(tmpl.content)会导致后续实例共享同一份节点，引发状态污染 -
<template></template>内不能放<script></script>或<style></style>，它们需通过 JS 动态创建并 append 到this.shadowRoot - 若模板需异步加载（如从外部文件 fetch），必须等
shadowRoot可用后再注入，否则节点挂载失败
如何让 HTML 模板真正“不依赖 JS 逻辑”
所谓解耦，不是把 JS 文件拆出来就完事——而是让 HTML 片段本身能脱离 JS 运行环境独立存在、可验证、可预览。这意味着它得是纯声明式结构，不含任何运行时契约。
比如 <my-card user-name="张三"></my-card> 是解耦的；而 <div data-user='{"name":"张三"}'></div> 不是，因为 JS 必须主动解析 data-user 字符串才能还原数据，这等于把序列化逻辑暴露给了模板。
- 属性值只接受原始类型（string/number/boolean），复杂数据走
attributeChangedCallback转换，不要塞 JSON 字符串 - slot 是唯一安全的内容分发机制：
<my-card><span slot="avatar">?</span></my-card>，比innerHTML注入更可控 - 禁止在模板中写
class="js-toggle-menu"这类仅用于 JS 钩子的 class；要用data-js-toggle并统一由组件管理，且该属性不参与样式定义
Shadow DOM 下样式与结构必须共存于 shadowRoot
很多开发者以为只要用了 customElements.define() 就天然隔离了样式——结果发现全局 CSS 还是能穿透进来，或者自己写的 .btn 在 shadowRoot 外被覆盖。根本原因是：样式没放进 shadowRoot，而是挂在 document head 里。
Shadow DOM 的隔离是严格的：外部样式表默认无法影响内部节点，内部样式也绝不会泄漏出去。但前提是——样式必须是 this.shadowRoot.appendChild(styleEl) 这样注入的。
- 用
adoptedStyleSheets可复用 CSSStyleSheet 实例，比每次新建<style></style>更高效，尤其适合主题切换场景 - 若需继承部分全局样式（如字体、颜色变量），设
mode: "open"后，在 shadowRoot 中用:host或:host-context()显式接入 - 绝对不要在 shadowRoot 外写
#my-card .title { ... }，这种选择器查不到内部节点，也不符合封装原则
<template></template> 的边界清晰、每个属性的语义明确、每条样式的作用域可控——解耦不是靠删代码实现的，是靠不断拒绝“临时加个 class 就好了”这类妥协达成的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
