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