JavaScript HTMLSlotElement : HTMLElement

Spec

Instance Properties

name : String

Instance Methods

assignedElements([options : Object]) : Array<Elements>

options : {

flatten

Boolean

}

Example:

<template>
  <slot></slot>
</template>
<script>
  const template = document.querySelector('template');

  class MyElement extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(template.content.cloneNode(true));

      const slot = this.shadowRoot.querySelector('slot');
      slot.addEventListener('slotchange', e => {
        for (const e of slot.assignedElements()) {
          console.log(e.nodeName);
        }
      });
    }
  }
  customElements.define('my-element', MyElement)
</script>
<my-element>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</my-element>

Run

Results:

assignedNodes([options : Object]) : Array<Node>

options : {

flatten

Boolean

}

Example:

<template>
  <slot></slot>
</template>
<script>
  const template = document.querySelector('template');

  class MyElement extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(template.content.cloneNode(true));

      const slot = this.shadowRoot.querySelector('slot');
      slot.addEventListener('slotchange', e => {
        for (const e of slot.assignedNodes()) {
          console.log(e.nodeName);
        }
      });
    }
  }
  customElements.define('my-element', MyElement)
</script>
<my-element>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</my-element>

Run

Results:

Instance Events

onslotchange / 'slotchange' event

listener(event : Event) : undefined

Fired when a child of the slot is added or removed.

Spec

home license contribute feedback