如何定义符合可访问性要求的自定义li元素？解决ul合规问题

核心前提：<ul>仅允许直接包含<li>、<script>、<template>元素，直接放入<my-li>这类自定义元素会违反HTML规范，同时导致辅助技术无法正确识别列表结构。

对给出的两个选项逐一分析：

• 选项1：写法错误（正确属性是role="listitem"而非aria-role），且即便修正属性，<ul>内的自定义元素依然不符合HTML结构要求，部分辅助技术无法将其识别为列表项，无法保障可访问性。
• 选项2：Shadow DOM内部的<li>无法被外部<ul>感知，因为Shadow DOM与外部DOM隔离，<ul>仍会将<my-li>视为非法子元素，无法形成合法的列表结构。

正确方案：让自定义元素继承原生HTMLLIElement #

通过继承原生列表项的类，使<my-li>成为合法的<li>扩展元素，既符合<ul>的子元素规范，又能保留原生列表项的可访问性特性。

实现代码示例：

class MyLI extends HTMLLIElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    // 在这里添加Shadow DOM内的自定义内容
    shadow.innerHTML = `<div>自定义列表项的内容</div>`;
  }
}

// 注册自定义元素，指定继承自li
customElements.define('my-li', MyLI, { extends: 'li' });

HTML使用方式：

<ul>
  <li is="my-li"></li>
</ul>

部分现代浏览器也支持直接使用自定义标签：

<ul>
  <my-li></my-li>
</ul>

这种方案下，<my-li>本质是原生<li>的定制版本，<ul>能正确识别其列表项身份，辅助技术也能正常解析列表结构，完全满足可访问性与HTML规范要求。

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