Question

tl; dr：

具有两个具有相同ID属性的元素是否有效，只要它们都位于单独的影子根下？
在这种情况下，屏幕阅读器会正确处理aria-labelledby吗？

例如，考虑以下自定义元素：

(function () {
  let template = document.createElement('template')
  template.innerHTML = `
    <svg viewBox="0 0 206 74"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         role="img"
         aria-labelledby="logo-title">
      <title id="logo-title"><slot>Logo of Some Company.</slot></title>

      <path d="..." fill="..."/>
    </svg>
  `

  class Logo extends HTMLElement {
    constructor () {
      super()

      let shadowRoot = this.attachShadow({mode: 'open'})
      shadowRoot.appendChild(template.content.cloneNode(true))
    }
  }

  customElements.define('company-logo', Logo)
})()

这样做有效吗？

<company-logo>
  Title One.
</company-logo>

<company-logo>
  Some other title.
</company-logo>

即使两个<title>共享相同的ID，这也将是有效的DOM吗？屏幕阅读器会为第一个徽标读“ Title One”，为第二个徽标读“ Some other title”吗？

Answer 1

您可以在同一页面上拥有同一自定义元素的多个实例，因此内部Shadow DOM将通过设计相同的ID进行共享。

就标准而言...

W3C's HTML5 Rec不包含Shadow DOM，因此不是它们的主题。
WHATWG's HTML Living Standard指出，节点树之间的ID应该是唯一的，但是如果涉及到扁平树（Light DOM树和Shadow DOM树的组合），则ID并不精确。据我了解，规范并没有说这是无效的：-）

在HTML元素上指定时，id属性值在元素树中的所有ID中必须是唯一的，并且必须至少包含一个字符。

实际上，浏览器处理相同的ID并不是问题。

我认为Aria Labels不能跨Shadow DOM，它应该取决于浏览器的实现。在阴影DOM上再次the specs says nothing。

更新

如Google的简介sur Shadow DOM中所述：

作用域DOM意味着您可以使用简单的CSS选择器，更通用的ID /类名，而不必担心命名冲突。

实际上，Shadow DOM允许您创建可分发和重用的Web组件，内部ID与同一页面中其他组件的其他ID匹配但由其他开发人员开发的可能性很高，并且Scoped DOM是好答案。

Answer 2

我认为使用 Shadow DOM 的具体原因之一是您可以拥有多个具有相同格式和结构的项目。这包括 ID 和类。每个 Shadow DOM 就像它自己的小文档。这对程序员来说是一个很大的优势，因为他们可以多次重复 Shadow 元素，而不必为 Shadow 中的元素生成唯一的 ID。

是否可以在单独的影子根目录中使用重复的ID？

2 个答案: