title: Are duplicate IDs allowed in separate shadow roots?
body: <p><strong>tl;dr:</strong></p>
  
  <ol>
  <li>Is it valid to have two elements with the same ID attribute, as long as both are under separate shadow roots?</li>
  <li>Would screen readers handle <code>aria-labelledby</code> correctly in such situation?</li>
  </ol>
  
  <hr>
  
  <p>For example, consider this custom element:</p>
  
  <pre><code>(function () {
    let template = document.createElement('template')
    template.innerHTML = `
      &lt;svg viewBox="0 0 206 74"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           role="img"
           aria-labelledby="logo-title"&gt;
        &lt;title id="logo-title"&gt;&lt;slot&gt;Logo of Some Company.&lt;/slot&gt;&lt;/title&gt;
  
        &lt;path d="..." fill="..."/&gt;
      &lt;/svg&gt;
    `
  
    class Logo extends HTMLElement {
      constructor () {
        super()
  
        let shadowRoot = this.attachShadow({mode: 'open'})
        shadowRoot.appendChild(template.content.cloneNode(true))
      }
    }
  
    customElements.define('company-logo', Logo)
  })()
  
  </code></pre>
  
  <p>Would it be valid to do:</p>
  
  <pre><code>&lt;company-logo&gt;
    Title One.
  &lt;/company-logo&gt;
  
  &lt;company-logo&gt;
    Some other title.
  &lt;/company-logo&gt;
  </code></pre>
  
  <p>Would this be a valid DOM, even when both <code>&lt;title&gt;</code>'s share the same ID? Would screen readers read "Title One" for the first logo, and "Some other title" for the second logo?</p>