浏览器将自定义标签（如<my-header>）解析为无语义的HTMLElement，不触发landmark角色、不参与sectioning、无障碍树中无role和name，仅作通用容器处理。
浏览器不会为HTML5标准外的自定义标签赋予任何语义角色，<my-header>、<app-card>这类标签在解析时一律降级为通用容器 <div>，不触发 landmark、sectioning 或 ARIA role 自动注入。
自定义标签在DOM树中实际被当作什么处理
HTML解析器对未知标签采用“void element fallback”策略：不报错，但剥离所有语义上下文。它不会像 <main> 那样自动添加 role="main"，也不会参与 document.querySelector('main') 的语义匹配。
- DOM节点类型仍是
HTMLElement，但node.role为空字符串 -
getComputedStyle()返回的 display 值默认为inline（非块级），需显式设为block才能正常布局 - 无障碍树（Accessibility Tree）中该节点无 role、no name、no properties，屏幕阅读器直接跳过或读作“group”
为什么 <custom-element> 不能替代 <section> 做语义划分
语义 sectioning 是由浏览器内建规则驱动的，只响应白名单标签。即使你给 <custom-section> 加上 role="region" 和 aria-labelledby，它仍不具备 <section> 的 sectioning root 行为——比如不会重置 <h1> 的层级计数，也不会影响 document.querySelectorAll(':scope > h2') 的节内选择逻辑。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<section>触发 sectioning root 创建，影响 heading 级别隐式计算 -
<custom-section>即使加了role="region"，heading 层级仍沿用父级上下文，不形成新节 - 搜索引擎和爬虫只识别标准语义标签，自定义标签内容会被提取，但无结构权重
想用自定义标签又保语义？必须手动补全 ARIA
若坚持使用自定义标签（如 Web Components 场景），语义不能靠猜测，必须显式声明。仅加 role 不够，还需配套 name、label、live region 等属性，否则辅助技术仍无法理解。
立即学习“前端免费学习笔记（深入）”；
- 基础语义：至少设置
role+aria-label或aria-labelledby - 导航区域：用
role="navigation"且确保内部含可聚焦链接 - 主内容区：用
role="main"，但注意同一文档只能有一个role="main"，否则违反 WCAG - 避免滥用
role="article"：它要求独立可分发性，不是所有“卡片”都满足
真正容易被忽略的是 heading 流程——自定义标签无法中断或重启 heading 级别序列，哪怕视觉上看起来是新章节，<h1> 在 <custom-article> 内仍被解析为页面最高级标题，而非该组件内的顶级标题。
