Stenciljs中实现合规可访问列表：如何设置自定义组件的HTMLElement类型？

Stencil 默认不支持让组件直接继承原生 HTMLElement 子类（比如 HTMLLIElement），因此无法使用自定义内置元素方案。但可以通过以下两种方式实现符合可访问性要求的列表结构：

方案一：利用宿主元素模拟列表项语义 #

将 <my-li> 的宿主元素通过 ARIA 属性赋予列表项语义，同时调整样式匹配原生 <li> 的表现，无需在 Shadow DOM 中嵌套 <li>，直接在 <ul> 中使用 <my-li> 即可保证可访问性。

代码示例：

import { Component, Host, h } from '@stencil/core';

@Component({
  tag: 'my-li',
  shadow: true,
  styles: `
    :host {
      display: list-item;
      margin-left: 1.5em;
      /* 补充匹配原生li的样式 */
    }
  `
})
export class MyLi {
  render() {
    return (
      <Host role="listitem">
        <span>hello!</span>
      </Host>
    );
  }
}

使用方式：

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

role="listitem" 会让屏幕阅读器识别该元素为列表项，display: list-item 保证视觉表现和原生 <li> 一致。

方案二：保留内部 <li> 并手动补充语义 #

如果必须在组件内部保留 <li>，可以通过为外部 <ul> 补充 ARIA 属性来修复语义识别问题，但这种方式存在一定兼容性风险：

代码示例：

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-li',
  shadow: true,
})
export class MyLi {
  render() {
    return (
      <li>
        <span>hello!</span>
      </li>
    );
  }
}

使用时为 <ul> 添加 role="list"，确保浏览器能识别其列表语义：

<ul role="list">
  <my-li></my-li>
</ul>

注意：浏览器无法识别 Shadow DOM 内的 <li> 为外部 <ul> 的子项，因此该方案仅作为备选，优先推荐方案一。

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