JSFiddle - React, Tailwind, and code Playground

HTML

<details open>
    <summary>Web Components is More Than One Thing</summary>
    <p>Web components consist of several loosely-coupled parts:</p>
    <ul>
        <li>Shadow DOM</li>
        <li>Templates</li>
        <li>Custom Elements</li>
        <li>Decorators</li>
    </ul>
</details>

JavaScript

var details = document.querySelector('details');
var detailsRoot = details.webkitCreateShadowRoot();
detailsRoot.innerHTML = '<table border><tr><td><content select=summary:first-of-type></content></td><td><content select=*></content></td></tr></table>';