custom-element-hidden.html | Explore in Territory

<!--
@BLINK-ALLOW:htmlTag=*
@WAIT-FOR:Done
-->
<!DOCTYPE html>
<html>
<body>
  <template id="template">
    <div><slot name="my-slot"></slot></div>
  </template>

  <div hidden>
    <my-element>
      <span slot="my-slot">Slot contents</span>
    </my-element>
  </div>

  <button id="status"></button>

  <script>
    // After a delay, make "my-element" into a custom element using
    // the template defined above. That will cause the template to be
    // rendered inside <my-element>, and the slot contents to be reparented
    // to the <slot> element.
    window.setTimeout(() => {
        customElements.define(
            'my-element',
            class extends HTMLElement {
                constructor() {
                    super();
                    let template = document.getElementById('template');
                    let templateContent = template.content;

                    const shadowRoot = this.attachShadow({mode: 'open'})
                          .appendChild(templateContent.cloneNode(true));
                }
            }
        );
        document.getElementById('status').setAttribute('aria-label', 'Done');
    }, 500);
  </script>
</body>
chromium/content/test/data/accessibility/html/custom-element-hidden.html
