Custom Elements是深度嵌入DOM构建与样式计算的标准化扩展机制，通过customElements.define()注册构造函数，节点创建时触发constructor，插入文档后执行connectedCallback，并遵循CSS层叠规则参与样式计算。
自定义元素（Custom Elements）不是“绕过”浏览器渲染流程的黑箱，而是深度嵌入在 DOM 构建与样式计算阶段的标准化扩展机制。它不改变解析、布局、绘制等核心环节，但会影响 DOM 树生成时机、节点初始化行为和样式继承路径。
CustomElementRegistry.define() 何时触发？
调用 customElements.define() 只是注册构造函数，并不立即创建或插入任何节点。真正影响渲染流程的，是后续 HTML 解析遇到该标签名，或 JS 显式调用 document.createElement() 的那一刻。
- 若自定义元素出现在初始 HTML 中（如
<my-button></my-button>），浏览器在 HTML 解析阶段会创建对应 DOM 节点，但**不会立即执行其constructor或connectedCallback** —— 这些回调在 DOM 树构建完成、节点被插入文档后才按规范触发 - 若通过 JS 动态创建（
document.createElement('my-button')），则constructor在创建时同步执行，但connectedCallback仅在该节点被 append 到 document 或 shadowRoot 时调用 - 注册前就已存在的同名标签（如先写 HTML 再 define），会被视为“未知元素”，仅作为普通 HTMLElement 存在，直到 define 后才会升级（upgrade）——此时会补发
constructor和connectedCallback
自定义元素如何参与样式计算？
自定义元素本身不自带样式规则，它的样式计算完全遵循标准 CSS 层叠逻辑：继承父元素属性、匹配选择器、应用 specificity 权重。但有两个关键细节容易被忽略：
-
:defined伪类只在元素成功 upgrade 后生效，可用于渐进式样式控制（如先隐藏未定义元素：my-button:not(:defined) { visibility: hidden; }） - 若在
constructor中直接设置this.style.xxx，属于内联样式，优先级高于外部 CSS；但若在connectedCallback中操作className或注入<style>，则需等待样式表加载/解析完成才能生效，可能引发一次重排 - Shadow DOM 模式下（
{ mode: 'open' }），其内部样式计算独立于主文档 CSSOM，document.styleSheets不包含 shadow 内部样式表
为什么 customElements.define() 后页面没反应？
常见现象是注册了元素，HTML 里也写了标签，但无渲染效果、回调不触发——这通常不是渲染流程阻塞，而是语义或时机问题：
立即学习“前端免费学习笔记（深入）”；
- 标签名不符合规范：必须含短横线（
-），如my-button合法，mybutton或MyButton会被忽略且不报错 - 重复注册：第二次调用
customElements.define('my-button', ...)会抛出DOMException: "Failed to execute 'define' on 'CustomElementRegistry': the name 'my-button' has already been used with this registry" - 脚本执行顺序错误：HTML 中的
<my-button>出现在 define 调用之前，且未使用defer或模块脚本，导致解析时该元素尚未注册，只能后续 upgrade —— 若 upgrade 逻辑缺失或失败，就始终“静默” - 构造函数抛出异常：哪怕只是
console.log前少了个分号，也会导致整个 upgrade 失败，且浏览器默认不报错（需在 DevTools Console 中留意 unhandled rejection）
最易被忽略的一点：自定义元素的生命周期回调（尤其是 connectedCallback）在服务端渲染（SSR）或静态 HTML 预加载场景中，可能被多次触发——因为节点可能被移除又重插，或 Shadow DOM 被重挂载。不要在里面做一次性副作用（如 fetch、addEventListener 未去重），否则会累积监听器或发起重复请求。
