跨ShadowDOM的自定义元素中<li>是否符合HTML规范及无障碍标准？

一、HTML5规范符合性 #

HTML标准明确要求<li>必须是<ul>、<ol>或<menu>的直接子元素（在flat tree层面）。

你设计的<my-list>（ShadowDOM含<ul>）和<my-list-item>（ShadowDOM含<li>）结构，在浏览器构建的flat tree中会呈现为：<ul>的直接子元素是<my-list-item>，而<li>的直接父元素是<my-list-item>的Shadow根，这不符合<li>的内容模型要求，属于违反HTML规范的情况。

若要兼顾自定义元素的样式隔离需求与规范合规性，可调整结构：

• 让<my-list-item>的ShadowDOM不包含<li>，将<li>放在<my-list>的ShadowDOM的<ul>中，通过slot将<my-list-item>的内容注入到<li>内。
• 或者使用自定义内置元素，继承原生<li>元素：class MyListItem extends HTMLLIElement {}，这样<my-list-item>本身就是合法的列表项元素，可直接作为<ul>的子元素。

二、无障碍指南符合性 #

无障碍的核心是保证屏幕阅读器等辅助技术能正确识别列表语义：

• 按你初始的结构，flat tree里<ul>的子元素是自定义元素而非<li>，屏幕阅读器可能无法自动识别这些自定义元素为列表项，导致列表语义断裂。
• 即便给<my-list-item>添加role="listitem"，由于ShadowDOM的嵌套特性，辅助技术对语义的识别仍可能存在偏差，存在无障碍风险。
• 更稳妥的方式是保留原生列表元素的层级关系：让<ul>直接包含<li>（或继承<li>的自定义元素），通过ShadowDOM实现样式隔离和事件绑定，原生语义能被辅助技术正确识别，符合WCAG无障碍指南。

三、axe-core测试相关 #

axe-core的listitem规则确实会检查<li>是否位于合法父元素内，但该规则默认未启用，且对ShadowDOM内的flat tree结构支持有限。若需验证自定义元素的合规性，可手动启用该规则，并结合浏览器无障碍调试工具（如Chrome的Accessibility Inspector）查看flat tree的语义结构。

内容的提问来源于stack exchange，提问作者Tim