customElements.define() 本身不触发渲染，仅注册构造函数；真正影响渲染的时刻是HTML解析遇到已注册标签名或JS调用createElement创建节点时。
自定义元素不改变浏览器渲染管道，它只是在标准 DOM 构建和样式计算阶段插入自己的行为节点——注册、升级、回调触发，全都在规范定义的时机发生，不会跳过 layout 或 paint。
customElements.define() 什么时候真正影响渲染？
调用 customElements.define() 本身不创建节点、不触发任何渲染动作，只注册构造函数。真正进入渲染流程的时刻有两个：
- HTML 解析时遇到已注册的标签名（如
<my-button></my-button>），此时创建节点，但constructor和connectedCallback暂缓执行，直到 DOM 树构建完成并插入文档 - JS 中调用
document.createElement('my-button')，此时同步执行constructor，但connectedCallback仍要等该节点被append到 document 或 shadowRoot 后才触发
常见误判：写了标签又调了 define，但没反应——大概率是标签名不合法（缺短横线）、或 HTML 先于 define 执行导致未升级。
为什么 <my-button> 渲染出来却没样式？
自定义元素本身不带默认样式，它的 CSS 行为完全遵循标准层叠规则，但有三个易忽略点：
立即学习“前端免费学习笔记（深入）”；
-
:not(:defined)选择器可用于渐进式隐藏：比如my-button:not(:defined) { visibility: hidden; }，避免未升级前闪现 - 在
constructor中写this.style.color = 'red'是内联样式，优先级高；但在connectedCallback里改className或注入<style>，需等样式表加载完才生效，可能引发一次重排 - 若启用 Shadow DOM（
{ mode: 'open' }），内部样式与主文档 CSSOM 隔离，document.styleSheets查不到它里面的<style>
扩展现有元素（如 <canvas>）必须用 is 属性
继承 HTMLCanvasElement 并注册后，不能直接写 <render-area width="400"></render-area>——浏览器根本不认这个标签名，width 属性不会映射，getContext() 会报错。
正确写法只有一种：
<canvas is="render-area" width="400" height="300"></canvas>
其中 is 的值必须和 customElements.define() 第一个参数**完全一致**（大小写、连字符都不能错）。漏掉 is，等于白写。
最容易被跳过的细节：属性不会自动映射。哪怕你写了 <my-input value="test">，类里也拿不到 this.value，得手动在 attributeChangedCallback 里监听并同步。
