customelements.define()要求自定义标签名必须含短横线以区分原生标签，布局组件通常不用shadow dom以保持样式穿透，应通过slot命名与fallback、attributechangedcallback监听属性变化、resizeobserver等协调子元素尺寸来平衡复用性与可控性。
customElements.define() 必须用短横线命名
浏览器强制要求自定义标签名包含至少一个短横线（-），比如main-layout、sidebar-container，写成mainlayout或MyLayout会直接报错：Failed to execute 'define' on 'CustomElementRegistry': The name "mainlayout" is not a valid custom element name。
这个限制不是为了“好看”，而是让浏览器能明确区分原生标签和自定义标签，避免未来 HTML 标准新增标签时产生冲突。所以别试图绕过它——哪怕只是内部用，也得老老实实加短横线。
- 合法：
header-nav、two-column-layout、responsive-grid - 非法：
header（原生已有）、TwoColumn（无短横线）、mylayout（小写无短横线）
布局类组件通常不需要 Shadow DOM
封装布局模板（比如三栏结构、顶部导航+主内容+侧边栏）的核心诉求是结构复用和语义化，而不是样式隔离。强行套用 attachShadow() 反而会让子内容无法被外部 CSS 控制，破坏布局的灵活性。
例如你写了一个 <main-layout></main-layout>，里面放了 <slot></slot>，但用了 Shadow DOM，那外部写的 main-layout .content { padding: 20px } 就完全无效——因为样式作用域被锁死了。
- 适合用 Shadow DOM 的场景：按钮、卡片、输入框等需要强封装、自带样式的 UI 控件
- 布局模板更适合直接操作
this.innerHTML或this.append(...)，保持样式穿透能力 - 如果真要隔离，只在必要时对内部固定结构（如默认页头背景色）加一层
<style></style>，不要整个容器都 Shadow
attributeChangedCallback 配合 observedAttributes 控制响应式行为
布局组件常需根据属性切换模式，比如 <responsive-layout breakpoint="768"></responsive-layout> 或 <two-column-layout side="left"></two-column-layout>。光靠 connectedCallback 只能初始化一次，后续改属性不会触发重渲染。
必须显式声明监听列表并实现回调：
static get observedAttributes() {
return ['breakpoint', 'side'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'breakpoint') {
this._updateBreakpoint(parseInt(newValue));
}
}
注意两点：
-
observedAttributes是静态 getter，返回字符串数组，拼写错一个字母（比如写成'breakpointt'）就完全不触发 - 属性值始终是字符串，
parseInt或JSON.parse要自己做，浏览器不会自动转换类型 - 首次初始化时，
attributeChangedCallback不会被调用，得在connectedCallback里手动读一次this.getAttribute('breakpoint')
slot 分发内容时注意命名与 fallback
布局组件靠 <slot></slot> 接收用户内容，但别假设用户一定按你设想的顺序或数量传入。比如 <main-layout><header>...</header><main>...</main></main-layout>，若没指定 name，所有子节点都会落到默认 <slot></slot> 里，顺序难控。
更稳妥的做法是明确命名 + 提供 fallback：
<div class="layout"> <header><slot name="header">默认页头</slot></header><main><slot name="main">默认主内容</slot></main><aside><slot name="aside">默认侧边栏</slot></aside> </div>
- 用户可自由决定是否传
<div slot="aside">...，不传就显示 fallback 文本 <li>避免把 <code><slot></slot>放在display: flex容器外层——Flex 不会自动拉伸未指定尺寸的 slot，容易导致高度塌陷 - 如果布局依赖子元素尺寸（比如等高列），别只靠 slot，要在组件内部用
ResizeObserver或 CSS Grid/Flex 主动协调
布局模板的复杂点不在封装动作本身，而在如何平衡“复用性”和“可控性”：太封闭（比如全用 Shadow DOM）就丧失了与现有样式体系的协作能力；太开放（比如只写个空容器）又失去了封装价值。真正难的是判断哪些该由组件管，哪些该留给使用者决定——这没法靠代码规范解决，得看具体项目约束。
