Web component default slot content

web_components_demo.js

customElements.define('my-span', 
  class extends HTMLElement {
    constructor() {
      super();
      
      // '<span><slot>default text</slot></span>'
      const span = document.createElement('span')
      const slot = document.createElement('slot')
      slot.appendChild(document.createTextNode('default text'))
      span.appendChild(slot)

      const shadowRoot = this.attachShadow({mode: 'open'})
      shadowRoot.appendChild(span)
    }
  },
)

const filledSpan = document.createElement('my-span')
filledSpan.appendChild(document.createTextNode('other text'))
const emptySpan = document.createElement('my-span')

document.body.appendChild(emptySpan)
document.body.appendChild(filledSpan)