自定义元素是封装DOM操作的边界，通过connectedCallback和attributeChangedCallback隐藏重复逻辑，使外部调用简化为声明式写法；必须继承HTMLElement、首行super()、注册名含短横线，属性监听需显式声明observedAttributes。
自定义元素不是“新标签”，而是封装DOM操作的边界
自定义元素本身不简化DOM操作，它把重复、易错的DOM操作逻辑封进connectedCallback和attributeChangedCallback里，让外部调用退化成声明式写法。比如你不再需要反复写document.querySelector('.card').innerHTML = ...，而是直接<user-card name="Alice"></user-card>——渲染、事件绑定、样式隔离全由组件内部处理。
常见错误现象：把自定义元素当普通HTML标签用，没定义类、没调用customElements.define()，结果页面上啥也不显示，控制台也没报错；或者写了class MyCard extends HTMLElement但忘了super()，导致this为undefined。
- 必须继承
HTMLElement，且构造函数第一行写super() - 注册名必须含短横线（如
'user-card'），否则浏览器拒绝识别 - 属性变更监听只对
observedAttributes数组里声明的属性生效，漏写就收不到attributeChangedCallback
批量渲染表格时，用<data-table>替代手写innerHTML拼接
原生innerHTML拼字符串快，但容易XSS、难调试、无法复用逻辑；而自定义<data-table>可以把列配置、排序、分页这些DOM操作逻辑固化在组件内，外部只需传数据。
使用场景：后台管理系统中多处用到带搜索/导出功能的表格，每个页面都手写tbody.innerHTML = rows.map(...).join('')，改个样式就得全局搜。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 组件内用
documentFragment批量生成<tr>再挂载，避免重排 - 把
data设为属性，触发attributeChangedCallback后解析JSON并重绘 - 对外暴露
sort(column)方法，内部直接操作this.tBodies[0].rows，不用暴露原始DOM节点
querySelector配自定义元素，比ID更可靠
组件化开发中ID常动态生成或重复，document.getElementById('save-btn')极易返回null；而document.querySelector('user-form [data-action="submit"]')能精准穿透Shadow DOM（若开启）或普通嵌套结构。
性能影响：自定义元素默认不启用Shadow DOM，所以querySelector仍走常规DOM树；但一旦启用了attachShadow({mode: 'closed'})，外部查询就失效了——这时必须靠组件暴露的getButton()之类方法。
- 优先用属性选择器（如
[data-testid="delete"]）而非类名，避免CSS干扰 - 不要在自定义元素内部用
id做逻辑判断，改用getAttribute('data-id') - 若需跨Shadow DOM查询，组件得主动提供
getElementByRole(role)这类安全接口
事件委托别绕开自定义元素的封装层
很多人在父容器上监听click，再用event.target.matches('.item-delete')判断，结果发现自定义元素内部的按钮点击没触发——因为事件路径被Shadow DOM截断，或组件自己调用了event.stopPropagation()。
正确做法是让组件内部把关键事件冒泡出来，比如this.dispatchEvent(new CustomEvent('item-delete', {detail: {id: 123}}))，外部监听user-list.addEventListener('item-delete', ...)即可。
- 禁止在自定义元素里直接写
el.onclick = handler，一律用addEventListener - 事件名用kebab-case（如
'data-loaded'），避免和原生事件冲突 - 如果组件要响应外部事件（如
focus），需在connectedCallback里手动this.addEventListener('focus', ...)
最易被忽略的是生命周期钩子执行时机：connectedCallback只在元素插入DOM时触发，但此时子节点可能还没渲染完；如果依赖this.querySelector('input')，得加requestAnimationFrame兜底，否则取到null。
