SVG slot content

by WebComponents

HTML

<div>
  <svg>
    <circle cx="50%" cy="50%" r="35%" fill="yellow" slot="content"></circle>
    <circle cx="50%" cy="50%" r="15%" fill="green" slot="content"></circle>
  </svg>
</div>
<script>
  const host = document.querySelector('div');
  const root = host.attachShadow({mode:'open'});
  root.innerHTML = `
		<svg viewBox="0 0 100 100">
		  <rect width="100%" height="100%" fill="blue"/>
		  <slot name="content"/>
		</svg>`;
  root.querySelectorAll('slot').forEach(shadowSlot => {
  	let name = shadowSlot.getAttribute("name");
    let slotFragment = new DocumentFragment();
    slotFragment.append(...host.querySelectorAll(`[slot="${name}"]`));
    shadowSlot.replaceWith(slotFragment);
  });
</script>