JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<h1>Insertion point inspection</h1>


<div id="broken">
  <h2>Insertion point is wrapped (not OK)</h2>
</div>

<div id="ok">
  <h2>Insertion point as direct child (OK)</h2>
</div>

JavaScript

var broken = document.querySelector('#broken');
var brokenRoot = broken.createShadowRoot();
brokenRoot.innerHTML = "<em>Content insertion point</em>: <header><content select='h2'></content></header>";

var ok = document.querySelector('#ok');
var okRoot = ok.createShadowRoot();
okRoot.innerHTML = "<em>Content insertion point</em>: <content select='h2'></content>";