自定义元素通过原子化标签（如<ds-heading>）替代多层语义嵌套，天然承载语义、样式边界与行为契约；正确用法是依托<slot>声明式分发内容，避免手动操作子节点或冗余div包裹，并依赖customElements.define实现浏览器原生语义识别与无障碍支持。
自定义元素如何直接替代多层语义嵌套
HTML 自定义元素不是“多一层标签”，而是把原本需要 3–5 层语义标签（比如 <section><header><h2><span class="title">）压缩成一个有明确职责的原子标签，比如 <ds-heading>。它天然承载语义、样式边界和行为契约，不再需要靠嵌套来“凑结构”。
常见错误是把自定义元素当 div 用：<ds-card><div class="content"><p>...</p></div></ds-card>——这反而增加了一层无意义嵌套。正确做法是让 <ds-card> 内部通过 <slot> 接收任意合法子内容，外部只写 <ds-card><p>正文</p></ds-card> 即可。
-
<ds-form>替代<form><div class="form-body"><fieldset>嵌套，内部自动处理disabled透传与校验逻辑 -
<ds-tabs>替代<div class="tabs"><ul><li><button>+ 多层容器，所有 tab 切换状态封装在类内部 - 避免在自定义元素里再套
<div class="wrapper">：Shadow DOM 已是天然容器，额外包裹只会干扰<slot>分发
slot 分发比手动遍历子节点更安全可靠
想让自定义元素“接受任意内容并原样渲染”，别在 connectedCallback 里写 this.appendChild(this.childNodes) 或 Array.from(this.children).forEach(...)——这些操作会破坏 slot 的声明式分发逻辑，且在 SSR 或模板解析阶段就失效。
正确方式是只用标准 <slot>，并配合 name 属性做内容分区：
立即学习“前端免费学习笔记（深入）”；
<template> <header><slot name="header"></slot></header> <main><slot></slot></main> <footer><slot name="footer"></slot></footer> </template>
- 不带
name的<slot>接收所有未命名子节点，顺序与 HTML 中一致 - 使用
<ds-card><h3 slot="header">标题</h3><p>内容</p></ds-card>即可精准投递，无需 JS 查询或移动节点 - 不要在
constructor()或connectedCallback()中调用this.querySelectorAll('slot')——此时 slot 尚未激活，返回空 NodeList
为什么用 customElements.define 而不用 class 封装
用 class="card" 模拟组件，最终仍要靠多层嵌套维持结构：“卡片”得包在 <div class="card"><div class="card__body"><div class="card__content">”。而 <ds-card> 是真实 HTMLElement 实例，浏览器原生识别其角色，Lighthouse 和 axe 工具能直接验证它的语义完整性，不需要靠 class 名去“猜”。
-
<ds-card>可被document.querySelector('ds-card')直接命中，class="card"需依赖约定（如必须带.card__body），一改就断 - 搜索引擎索引时，
<ds-card>被当作独立语义单元处理；<div class="card">仍是普通 div，无结构信号 - 无障碍工具读屏时，
<ds-card role="region" aria-labelledby="xxx">可主动暴露区域语义；纯 class 方案只能靠 JS 动态补role，无 JS 环境下完全失效
attributeChangedCallback 不触发时该查什么
你写了 <ds-button disabled>，但 UI 没变灰？不是 Shadow DOM 样式问题，先检查属性监听是否生效。这个回调只响应 HTML 属性变更，对 JS 属性赋值（如 btn.disabled = true）完全无感。
- 确认
static get observedAttributes()返回数组包含'disabled'，拼写大小写必须完全一致 - 确保初始写法是
<ds-button disabled>或运行时调用el.setAttribute('disabled', '')，而非el.disabled = true - 布尔属性的
newValue是null（表示移除）或字符串""（空字符串）/"disabled"，不是布尔值，需用newValue !== null判断 - 首次初始化时
oldValue总是null，别写if (oldValue === newValue)这类逻辑
真正省嵌套，不是删标签，而是让每个标签都不可替代——<ds-button> 就是按钮，<ds-input> 就是输入控件，它们的存在本身就在消解“要不要再套一层容器”的纠结。
