自定义元素通过封装结构简化嵌套，必须含短横线命名且调用customelements.define()注册；配合attachshadow可实现dom与样式隔离，属性监听需observedattributes与attributechangedcallback配合。
HTML 自定义元素（Custom Elements）本身不直接“简化嵌套”，但它能帮你把深层嵌套逻辑封装掉——真正减少 DOM 层级的，是用它替代一堆无语义 wrapper <div>，让模板里只写一个标签，背后却撑起完整结构。
<h3>自定义元素必须配合 <code>attachShadow 才能隔离嵌套？
不是必须，但绝大多数实用场景都需要。不带 Shadow DOM 的自定义元素（autonomous custom element）只是个语义占位符，DOM 还是平铺的；而用 attachShadow({ mode: 'closed' }) 后，内部结构完全隐藏，外部只能看到一个节点，嵌套深度从 4–5 层压到 1 层。
- 不启用 Shadow DOM：浏览器渲染时仍会展开全部子节点，
document.querySelector('.deep-wrapper')依然能命中内部 div - 启用后：
shadowRoot.querySelector('.inner')才能访问内部，外部 JS/CSS 隔离，CSS 不会意外穿透 - 注意：IE 完全不支持；Safari 10.1+、Chrome 54+、Firefox 63+ 支持
attachShadow
customElements.define() 注册时命名必须含短横线？
必须。这是 HTML 规范硬性要求，否则浏览器直接抛 DOMException: Failed to execute 'define' on 'CustomElementRegistry'。名字像 my-card、data-table 可以，myCard 或 card 都会失败。
- 短横线是浏览器识别“这是自定义元素而非原生标签”的唯一语法标记
- 不能以
x-开头（旧式前缀已废弃），也不能纯数字或仅含短横线 - 注册后，该标签可直接在 HTML 中使用：
<user-profile name="Alice"></user-profile>
属性传值怎么触发内部 DOM 重建？
靠 static get observedAttributes() + attributeChangedCallback 组合。它不像 Vue/React 那样自动响应式更新，你得手动处理变化并调用 this.render() 重绘 shadow 内容。
- 漏写
observedAttributes：属性变，回调不触发 - 在
attributeChangedCallback里直接改this.innerHTML会清空 shadowRoot——必须用this.shadowRoot.innerHTML = ...或更稳妥的render()方法 - 字符串属性要自己转类型：
parseInt(newValue)或JSON.parse(newValue)，浏览器只传字符串
为什么用自定义元素后，CSS 选择器反而更难写了？
因为 Shadow DOM 天然隔离样式。外部 CSS 无法穿透到 shadow 内部，.my-card .title 对 shadow 里的 <h3 class="title"></h3> 完全无效——这其实是优点，不是 bug。
- 想复用样式：用
:host控制组件自身，:host-context(...)响应外部环境（如主题类） - 想透传样式变量：用 CSS 自定义属性（
--card-bg），在 shadow 内通过var(--card-bg)接收 - 别试图用
/deep/或::ng-deep（已废弃），现代方案只有 slot + CSS 变量 + :host
最易被忽略的一点：自定义元素不是“写一次就完事”。它把嵌套复杂度从模板层转移到了组件实现层——你得自己管理生命周期、属性同步、事件冒泡边界、无障碍属性透传（比如 role 和 aria- 要手动绑定到 shadow 内部节点）。没想清楚这些，反而会让结构更难维护。
