Допускаются ли дубликаты идентификаторов в отдельных теневых корнях? - PullRequest
Новая
       20

Допускаются ли дубликаты идентификаторов в отдельных теневых корнях?

3 голосов
/ 07 мая 2019

tl; dr:

  1. Допустимо ли иметь два элемента с одинаковым атрибутом ID, если оба находятся под отдельными теневыми корнями?
  2. Будет ли программа чтения с экрана правильно обрабатывать 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>

Будет ли это действительный DOM, даже если оба <title> имеют один и тот же идентификатор?Читатели экрана будут читать «Заголовок один» для первого логотипа и «Другой заголовок» для второго логотипа?

1 Ответ

4 голосов
/ 07 мая 2019

На одной странице может быть несколько экземпляров одного и того же пользовательского элемента, поэтому внутренняя Shadow DOM будет совместно использовать одни и те же идентификаторы.

Что касается стандартов ...

  • HTML5 Rec W3C не включает Shadow DOM, поэтому для них это не тема.

  • Стандарт жизни HTML WHATWG утверждает, что идентификатор должен быть уникальным среди дерева узлов, но не уточняет, является ли сплющенное дерево (комбинация деревьев Light DOM и деревьев Shadow DOM) обеспокоен. Насколько я понимаю, спецификации не говорят, что это не верно: -)

При указании в элементах HTML значение атрибута id должно быть уникальным среди всех идентификаторов в дереве элемента и содержать хотя бы один символ.

На самом деле браузеры не сталкиваются с одинаковыми идентификаторами.

Я не думаю, что ярлыки Aria могут пересекать Shadow DOM, это должно зависеть от реализации браузера. Здесь снова спецификации ничего не говорят на Shadow DOM.

Обновление

Как указано во введении Google в Sur Shadow DOM:

DOM Scoped означает, что вы можете использовать простые селекторы CSS, более общие имена идентификаторов / классов и не беспокоиться о конфликтах имен.

Действительно, тот факт, что Shadow DOM позволяет вам создавать веб-компоненты, которые вы можете распространять и использовать повторно, вероятность того, что внутренние идентификаторы будут совпадать с другими идентификаторами других компонентов на той же странице, но разработанными другими разработчиками, высока, а Scoped DOM является хороший ответ

...