浏览器将自定义标签（如）当作HTMLElement处理，不报错但无默认语义：tagName全大写、display默认inline、role为空、不参与sectioning、无障碍树中无name/role。
渲染引擎不会跳过无效HTML标签解析，它根本就不管“无效”这回事——遇到不认识的标签，直接当普通 HTMLElement 处理，不报错、不警告、不中断解析。
浏览器对自定义/非法标签的实际处理方式
Chrome、Firefox、Safari 都把 HTMLElement 实例，但有几条硬限制：
-
el.tagName返回全大写字符串（如"MY-HEADER"），不是小写或驼峰 -
getComputedStyle(el).display默认是inline，不是block—— 所以设width: 100%没效果 -
el.role为空，无障碍树里没有语义，屏幕阅读器通常读作 “group” 或直接跳过 - 它不参与 sectioning（比如不会重置
层级计数），: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
把 后克隆插入 DOM，即使已注册该自定义元素，connectedCallback 也不一定立刻执行。
-
template.content中的节点在克隆时仍是HTMLUnknownElement，需手动调用customElements.upgrade(fragment) - upgrade 只补初始化逻辑（如属性反射），不触发生命周期钩子
-
connectedCallback在节点真正挂载到文档后才触发，但此时document.body.contains(this)可能仍为false（尤其在document.write或脚本阻塞场景下） - 若依赖父容器尺寸或 layout 信息，应在
requestAnimationFrame回调中读取，而非在connectedCallback里直接取offsetWidth
最常被忽略的是：自定义标签的语义必须靠 ARIA + CSS + JS 三者协同补全，浏览器不会因为标签名像 role="navigation" 不够，还得配 aria-label 或 aria-labelledby，且目标元素必须存在、可访问、未被 display: none 隐藏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
