最轻量可控的布局组件方案是用封装配合js实例化；web components仅在需样式隔离和属性响应时适用，95%布局组件无需shadow dom。
直接用 <template></template> 封装布局组件，配合 JavaScript 实例化是最轻量、最可控的方案；Web Components 适合需要样式隔离和属性响应的场景，但别一上来就写 customElements.define —— 大部分布局组件根本不需要 Shadow DOM。
为什么不用 Server-Side Includes 或构建工具预处理
SSI 要求服务器开启模块（Apache 的 mod_include，Nginx 需额外配置），本地开发时无法预览，调试困难；Vite/Webpack 等构建工具引入 HTML 组件化，往往只是为了“看起来像现代项目”，反而让一个页脚复用变成要配 vite-plugin-html、写 .html?raw 导入、处理路径别名——小项目里纯属加戏。
- 本地双击打开 HTML 就能跑的模板，才是真复用
- 所有浏览器都支持
<template></template>，IE11+ 兼容无压力 - 布局组件通常不带复杂交互，JS 实例化够用，没必要上 Lit 或 React
怎么用 <template></template> 封装页眉/页脚这类通用布局
关键不是把 HTML 塞进去，而是定义好“可变锚点”和“注入时机”。比如页脚常含版权年份、备案号、外部链接，这些必须可配置，不能写死。
- 在
<template id="layout-footer"></template>里用data-bind标记变量位置：<p data-bind="copyright"></p> - 工厂函数接收对象参数：
renderFooter({ copyright: '© 2024–<span id="current-year"></span>', icp: '京ICP备XXXXX号' }) - 执行时自动填充：
footer.querySelector('[data-bind="copyright"]').textContent = options.copyright - 年份用
document.getElementById('current-year').textContent = new Date().getFullYear()动态写入，避免每年手动改
布局组件要不要用 Shadow DOM？
95% 的情况不要。布局组件（如 <header></header>、<nav></nav>、<footer></footer>）本质是语义容器，样式理应受全局 CSS 控制——你肯定希望页脚文字大小跟着 base.css 里的 font-size 变量走，而不是被 Shadow DOM 锁死。
- 用了 Shadow DOM，
body下全局定义的:root变量进不去，得重复声明 - 外部 CSS 无法穿透，
.dark-mode footer这类主题切换失效 - 如果真需要隔离（比如嵌入第三方页脚代码），用
<iframe sandbox></iframe>比 Shadow DOM 更彻底、更安全 - 真正该用 Custom Elements 的是「带状态的布局单元」，比如可折叠侧边栏、多语言切换器——它们有属性、事件、生命周期，不是纯结构
多个布局组件嵌套时怎么避免冲突
核心是控制注入点和命名空间。别让所有模板都往 document.body 里 append，而是明确指定挂载容器，比如 <div id="app-header"></div>。
- 每个布局组件模板 ID 必须唯一：
id="layout-header"、id="layout-sidebar" - 工厂函数返回 DocumentFragment，由调用方决定插入位置：
document.getElementById('app-header').appendChild(header) - 避免在模板里写
id="logo"这类全局唯一标识——换成class="layout-header__logo"，用类选择器定位 - 如果组件间需通信（比如导航激活状态同步），用自定义事件：
document.dispatchEvent(new CustomEvent('nav:active-change', { detail: { id: 'products' } }))
真正难的不是封装动作本身，而是决定哪些东西“值得封装”：一个只在首页出现的 banner，硬抽成组件只会增加维护负担；而所有页面共用的面包屑结构，哪怕目前只有两处用到，也该立刻封装——因为第三处出现时，你已经没耐心再复制粘贴一次了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
