content / test / data / accessibility / html / custom-element-nested-slots.html [blame]

<!--
@AURALINUX-ALLOW:class:*
@AURALINUX-ALLOW:tag:*
@BLINK-ALLOW:htmlTag=*
@BLINK-ALLOW:className=*
-->
<template id="template">
  <div class="div-inside-template">
    <slot name="outer-slot" class="outer">
        <slot name="inner-slot" class="inner"></slot>
    </slot>
  </div>
</template>

<my-element>
  <p slot="inner-slot">Slot contents</p>
</my-element>

<script>
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));
        }
    }
);
</script>