Live
<slot-example> <p>This line goes into the first default slot</p> This line too <p slot="slot-b">This line goes into slot-b</p> <p slot="slot-a">This line goes into the first slot-a</p></slot-example>
Live
xxxxxxxxxx13
customElements.define('slot-example', class extends HTMLElement { constructor () { super() this.attachShadow({ mode: 'open' }) this.shadowRoot.innerHTML = ` <slot>Default Slot Content Default Slot</slot> <slot name="slot-a">Default Slot Content of slot-a</slot> <slot>Default Slot Content of Default Slot</slot> <slot name="slot-b">Default Slot Content of slot-b</slot> <slot name="slot-a">Default Slot Content of slot-a</slot> ` }})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.