html-slot-evaluator.js

function evaluateTemplate(template = '', html = '') {
  const tag = Object.assign(
    document.createElement('shadow-dom'),
    {innerHTML: html}
  )

  tag.attachShadow({mode: 'open'})
  tag.shadowRoot.innerHTML = template

  // Replace <slot> with contents (flatten)
  tag.shadowRoot.querySelectorAll('slot').forEach(tag =>
    tag.replaceWith(...tag.assignedNodes())
  )

  // Strip slot="" attributes from previously slotted content
  tag.shadowRoot.querySelectorAll('[slot]').forEach(tag =>
    tag.removeAttribute('slot')
  )

  return tag.shadowRoot
}