自定义元素未渲染的根源在于三个硬性条件未满足：customElements.define()未调用、类未继承HTMLElement、标签名不含连字符；任意一条缺失都会导致元素被当作HTMLUnknownElement，connectedCallback永不触发。
自定义元素没渲染？先看是否满足三个硬性条件
浏览器把自定义元素当普通标签甚至不识别，基本就是卡在这三点上：customElements.define()没调用、类没继承HTMLElement、标签名没连字符。任意一条不满足，<my-button></my-button>就只是个空壳，connectedCallback永远不会触发。
- 必须用
class MyButton extends HTMLElement，不能直接class MyButton或继承Object -
customElements.define('my-button', MyButton)里的名字必须带连字符，mybutton或MyButton会报Failed to execute 'define': The name must contain a hyphen - 如果元素已出现在 HTML 中（比如写在
里），define()必须在 DOM 解析完成前执行，否则会降级为HTMLUnknownElement，后续补注册只能靠customElements.upgrade()手动升级
为什么元素渲染了但没样式？:defined伪类是关键
自定义元素注册和 DOM 插入之间存在时序差，直接写my-button { display: block; }可能导致 FOUC（无样式内容闪烁）或样式被忽略——因为浏览器还没确认这个标签已被定义。
- 用
my-button:not(:defined) { visibility: hidden; }先隐藏未升级的节点 - 再写
my-button:defined { display: block; padding: 8px; }确保样式只作用于已成功升级的实例 - 不要依赖
display: block兜底：旧版 Safari 对未定义元素默认按inline处理，不显式声明容易错位
动态创建的自定义元素为什么不触发connectedCallback？
通过document.createElement('my-button')创建后，如果不插入文档，connectedCallback根本不会运行——它只在节点真正挂载到document或shadowRoot时触发。
- 正确顺序：
const el = document.createElement('my-button');→el.setAttribute('data-id', '123');→document.body.appendChild(el); - 别在
constructor里操作 DOM 或读取this.innerHTML，此时this还是空节点，innerHTML为空字符串 - 想提前初始化状态，放在
constructor里设属性或监听attributeChangedCallback更安全
扩展现有元素时，is属性写错等于白写
想让<canvas></canvas>具备自定义逻辑，却写了<render-area width="400"></render-area>，那width属性根本不会生效，getContext()也会报undefined——因为浏览器压根没把它当HTMLCanvasElement实例。
立即学习“前端免费学习笔记（深入）”；
- 注册必须带
{ extends: 'canvas' }：customElements.define('render-area', RenderArea, { extends: 'canvas' }) - 使用必须用原生标签+
is属性：<canvas is="render-area" width="400"></canvas> -
is值大小写敏感，"RenderArea"和"render-area"不等价；动态设置element.setAttribute('is', 'xxx')无效，只在元素创建时解析
define()只是注册蓝图，connectedCallback才是开工指令，而:defined才是样式入场券。漏掉任一环节，元素就停在半路。 
