Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
​
<head>
​
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Changing slot default content should trigger slotchange event</title>
​
  <template id="innerTemplate">
    <slot></slot>
  </template>
​
  <template id="outerTemplate">
    <inner-element>
      <slot>
        <div>Here's some default content.</div>
      </slot>
    </inner-element>
  </template>
​
  <script type="module">
    class InnerElement extends HTMLElement {
      connectedCallback() {
        const root = this.attachShadow({ mode: 'open' });
        const clone = document.importNode(innerTemplate.content, true);
        root.appendChild(clone);
        // If our slot content changes, update the diagnostic message.
        const slot = root.querySelector('slot');
        slot.addEventListener('slotchange', () => {
          negative.style.display = 'none';
        });
      }
    }
    customElements.define('inner-element', InnerElement);
​
    class OuterElement extends HTMLElement {
      connectedCallback() {
        const root = this.attachShadow({ mode: 'open' });
        const clone = document.importNode(outerTemplate.content, true);
        root.appendChild(clone);
      }
    }
    customElements.define('outer-element', OuterElement);
​
    // At runtime, add some default content to the outer element's slot.
    customElements.whenDefined('outer-element').then(() => {
      const outer = document.querySelector('outer-element');
      const outerSlot = outer.shadowRoot.querySelector('slot');
      const defaultDiv = document.createElement('div');
      defaultDiv.appendChild(new Text('Here is some more default content.'));
      outerSlot.appendChild(defaultDiv);
    });
  </script>
​
</head>
​
<body>
  <outer-element></outer-element>
  <p>
    Changing slot default content did <em id="negative">not</em> trigger slotchange.
  </p>
</body>
​
</html>
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JanMiksovskypro
0viewers