浏览器将自定义标签（如）当作HTMLElement处理，不报错但无默认语义：tagName全大写、display默认inline、role为空、不参与sectioning、无障碍树中无name/role。
渲染引擎不会跳过无效HTML标签解析，它根本就不管“无效”这回事——遇到不认识的标签，直接当普通 HTMLElement 处理，不报错、不警告、不中断解析。
浏览器对自定义/非法标签的实际处理方式
Chrome、Firefox、Safari 都把 <my-header></my-header>、<foo-bar></foo-bar> 这类非标准标签当作 HTMLElement 实例，但有几条硬限制：
-
el.tagName返回全大写字符串（如"MY-HEADER"），不是小写或驼峰 -
getComputedStyle(el).display默认是inline，不是block—— 所以设width: 100%没效果 -
el.role为空，无障碍树里没有语义，屏幕阅读器通常读作 “group” 或直接跳过 - 它不参与 sectioning（比如不会重置
<h1></h1>层级计数），:scope > h2选择器也完全不生效
为什么 display: block 不是可选，而是必须
无效标签默认是 inline，而 inline 元素无视 width、height、margin-top/bottom 等块级样式。你不能靠“浏览器自动识别语义”来撑开容器。
- 必须显式声明
display: block、display: flex或display: grid - 如果用了 Shadow DOM，还要在
:host里设display，否则宿主元素仍保持inline - 别依赖
contenteditable或tabindex来“激活”语义——它们只影响焦点和编辑行为，不改变渲染盒模型
customElements.upgrade() 不会自动触发 connectedCallback
把 <my-button></my-button> 放进 <template></template> 后克隆插入 DOM，即使已注册该自定义元素，connectedCallback 也不一定立刻执行。
立即学习“前端免费学习笔记（深入）”；
-
template.content中的节点在克隆时仍是HTMLUnknownElement，需手动调用customElements.upgrade(fragment) - upgrade 只补初始化逻辑（如属性反射），不触发生命周期钩子
-
connectedCallback在节点真正挂载到文档后才触发，但此时document.body.contains(this)可能仍为false（尤其在document.write或脚本阻塞场景下） - 若依赖父容器尺寸或 layout 信息，应在
requestAnimationFrame回调中读取，而非在connectedCallback里直接取offsetWidth
最常被忽略的是：自定义标签的语义必须靠 ARIA + CSS + JS 三者协同补全，浏览器不会因为标签名像 <my-nav></my-nav> 就赋予导航区域行为。光加 role="navigation" 不够，还得配 aria-label 或 aria-labelledby，且目标元素必须存在、可访问、未被 display: none 隐藏。
