web components 是浏览器原生支持的组件化标准，由 custom elements、shadow dom 和 html templates 三部分构成，实现结构、样式、逻辑封装及跨框架复用。
纯 HTML 本身不支持组件复用，硬写重复结构（比如 10 个页面都复制粘贴同一段 <header></header>）等于主动放弃维护性——改一处，漏八处，连 CSS 类名都可能不一致。
用 Web Components 实现真正可复用的自定义标签
这是目前唯一无需构建工具、不依赖后端、浏览器原生支持的组件化路径。关键不是“能写新标签”，而是它自带封装能力：结构、样式、逻辑全包进一个 class 里。
-
customElements.define()注册时，标签名必须含短横线（如<nav-bar></nav-bar>），否则浏览器直接忽略 -
Shadow DOM默认是mode="closed"，外部 JS 无法访问内部节点；调试时建议设为mode="open" -
<template></template>里的内容不会渲染，必须用.content.cloneNode(true)手动克隆并注入this.shadowRoot - 组件内绑定事件必须用
this.shadowRoot.addEventListener()，document.addEventListener()捕获不到影子树里的冒泡
避免用 <iframe></iframe> 或 document.write() 假装组件化
这两种做法看着像“复用”，实则制造更多问题：
-
<iframe src="header.html"></iframe>：样式隔离但 SEO 彻底失效，父页滚动与 iframe 内容不同步，JS 上下文完全断裂 -
document.write()：强制重排 DOM，破坏浏览器解析流，且字符串拼接极易引入 XSS（尤其带用户输入时） - 把
<template></template>当普通容器用——忘了调用cloneNode()，结果页面永远空白
静态页面也能做组件化，但得靠约定和脚本辅助
没有构建流程时，“组件”本质是一套人工维护的契约，不是自动能力：
- 每个区块外层加统一前缀类，如
cmp-header，子元素用 BEM 规范：cmp-header__logo、cmp-header__nav - 用
data-属性传递配置：<div class="cmp-banner" data-theme="dark" data-closable="true">，JS 读取后决定是否渲染关闭按钮<li>动态内容留空容器 + 注释说明用途，例如：<code><div class="cmp-list__items"><!-- 插入列表项 --></div>，方便后续手写或脚本注入 - 全局样式要预留钩子，比如给
cmp-card加!important的声明，否则父级 CSS 会穿透覆盖
Web Components 的难点不在语法，而在边界意识：一个组件该暴露哪些属性、响应哪些事件、是否允许 slot 替换内容——这些设计决策比代码本身更影响复用效果。没想清楚就注册，很快就会发现 <user-card></user-card> 在不同页面表现不一致，因为没人约定好 data-avatar 是 URL 还是 base64 字符串。
