真正可配置、可复用的布局组件必须基于 Custom Elements + Shadow DOM，配合属性监听与 CSS 自定义属性响应机制；仅用 <template> 无法实现响应式配置、样式隔离和高效更新。
直接用 <template> + JavaScript 实例化做“高阶布局组件”，容易变成胶水代码堆砌，真正可配置、可复用的布局组件必须配合 Shadow DOM 和属性响应机制——否则所谓“配置”只是字符串拼接，改个间距都要动 JS 逻辑。
为什么不能只靠 <template> 做布局组件
<template> 本身不带逻辑、不监听变化、不隔离样式，它只是个 DOM 片段容器。你写一个 <template id="grid-layout">，再用 cloneNode(true) 插入页面，得到的是一坨裸 HTML：没有响应式属性更新、无法通过 setAttribute 控制列数、padding 值改了还得手动重 render。
- 常见错误现象：
<grid-layout cols="3"></grid-layout>写了属性，但组件内部没监听cols，渲染还是写死的grid-template-columns: 1fr 1fr 1fr - 使用场景错配：拿
<template>当“配置接口”用，实际只是静态模板复用，和写三个<div class="grid-3">没本质区别 - 性能隐患：每次配置变更都得删旧节点 + 克隆新模板 + 重新绑定事件，比直接操作 CSS 变量慢一个数量级
必须用 Custom Elements + Shadow DOM 才算“高阶”
真正的可配置布局组件，核心是把“配置项”映射为 CSS 自定义属性（--cols、--gap），再让 Shadow DOM 内部样式实时响应。这样改属性 = 改样式，无需 DOM 操作。
- 在组件类里声明监听：
static get observedAttributes() { return ['cols', 'gap', 'align']; } - 在
attributeChangedCallback中同步写入 style：this.shadowRoot.documentElement.style.setProperty('--cols', value); - Shadow DOM 内部用
style标签写：grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap, 1rem); - 别把整个 grid 结构写死在
innerHTML里——留<slot>让用户塞任意内容，布局逻辑只管容器层
配置参数设计要克制，别试图覆盖所有 CSS Grid 属性
暴露太多属性（比如 grid-auto-flow、grid-row-start）会让组件 API 膨胀且难维护。聚焦高频可控项，其余交给用户用 style 或子元素类名覆盖。
立即学习“前端免费学习笔记（深入）”；
- 推荐最小可用配置集：
cols（转为repeat()）、gap（转为gap）、align（转为justify-items）、fluid（布尔值，控制是否设width: 100%） - 避免透传 CSS 值：
<grid-layout grid-template-areas="a b">是反模式——字符串难校验、IDE 不提示、无法类型约束 - 对齐方式用枚举值约束：
align="start"/"center"/"end"，而不是接受任意 CSS 值 - 移动端适配靠媒体查询写在 Shadow DOM 内部，不要让用户在外面套
@media—— 那就失去封装意义了
最容易被忽略的细节：CSS 自定义属性作用域和 fallback
在 Shadow DOM 里用 var(--cols, 2) 看似稳妥，但如果父级没设 --cols，又没在组件内提供默认 style，repeat(var(--cols), 1fr) 会直接失效——浏览器不报错，但 grid 崩溃成单列。
- 务必在组件
<style>开头加默认值：:host { --cols: 2; --gap: 1rem; --align: stretch; } -
:host选择器必须显式写，不能依赖外部样式注入——Shadow DOM 天然隔离 - 如果用户想全局统一基础值，得在
<html>或:root设，组件内var(--cols, 2)才能 fallback 成功 - 别忘了测试
cols="auto-fit"这类非数字值——需要 JS 做类型判断，转成repeat(auto-fit, minmax(200px, 1fr)))，不能硬塞进repeat()
