自定义元素不能替代语义化html标签，因其无内置语义，需手动添加role/aria属性并模拟原生行为；正确用法是将其作为等语义容器的子组件，而非独立使用。
自定义元素（Custom Elements）不能替代语义化标签
HTML 自定义元素（如 custom-element）本身不带任何语义，浏览器和辅助技术完全不认识它——除非你手动挂载 role、aria- 属性，甚至模拟原生行为。它解决的是组件复用问题，不是语义表达问题。把 <main></main> 换成 <my-main></my-main>，只会让屏幕阅读器报 “unknown landmark”，Lighthouse 直接标红 “Missing main landmark”。
常见错误现象：document.createElement('article-card') 后直接塞内容，没设 role="article"、没透传 tabindex、没处理焦点链——结果键盘用户卡死，爬虫跳过整块。
- 自定义元素必须显式声明语义：用
role补齐 landmark（如role="main"），或继承原生语义（通过extends HTMLElement+is="article"语法，但支持度极低） - 不能绕过 HTML5 标准结构：即使用了
<my-header></my-header>，仍需确保它包裹在真正的<header></header>或作为直接子元素存在，否则破坏 outline algorithm - SSR/SEO 场景下风险更高：服务端渲染时，自定义标签若未被 polyfill 或 hydrate，可能被当作纯文本或丢弃，导致首屏无
<nav></nav>、无<main></main>
什么时候该用自定义元素配合语义化布局
真正有价值的结合点，是用自定义元素封装「有明确语义边界」的可复用区块，同时保留外层标准语义容器。比如博客列表页中重复出现的卡片，它本身是独立内容单元，天然对应 <article></article>。
正确做法：<article><blog-post-card></blog-post-card></article>，而非 <blog-post-card></blog-post-card> 单独使用。
- 自定义元素应作为
<article></article>、<section></section>、<aside></aside>的子组件，不破坏父级语义层级 - 组件内部避免再套一层无意义
<div class="card-inner">：如果 <code><blog-post-card></blog-post-card>已用 Shadow DOM 封装样式，它的 shadow root 根节点可直接设role="article"并透传标题<h2></h2> - 需要暴露语义接口：比如通过
attributeChangedCallback响应aria-label变更，并同步更新内部<button></button>的aria-label
比自定义元素更轻量且语义安全的替代方案
多数所谓“需要自定义语义”的场景，其实只需组合原生标签+恰当属性，就能达成目标，且零兼容性风险。
例如想表达“带操作按钮的设置项”，不用写 <setting-item></setting-item>：
-
<li>天然属于列表语义，配合role="none"可剥离默认列表符号，又不丢失结构上下文 -
role="group"+aria-labelledby明确建立控件与描述的关联，比自定义元素里手写 JS 绑定更可靠 - 整个结构可直接放在
<ul></ul>中，满足表单设置页的语义逻辑，且所有浏览器、读屏器开箱即用
容易被忽略的 DOM 解析成本差异
自定义元素注册（customElements.define()）本身不慢，但它的实例化会触发额外解析路径：浏览器要查 registry、走 upgrade 流程、触发 connectedCallback，而原生语义标签是 parser 直接识别的 fast path。
实测 Chrome DevTools Performance 面板中，100 个 <article></article> 节点比 100 个 <my-article></my-article> 节点平均快 8–12ms 解析 —— 这还不算 JS 初始化开销。对首屏关键路径来说，这点延迟可能让 LCP 推迟一帧。
- 不要在
<main></main>内部大量使用未预定义的自定义标签，尤其 SSR 场景下易触发 hydration mismatch - 若必须用，优先在 document.body 后注册，避免 parser 阻塞；或用
defer脚本，但需确保customElements.whenDefined()同步等待逻辑到位 - 最稳妥的底线：只要
<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>能表达清楚，就别动customElements.define()
