JSFiddle - React, Tailwind, and code Playground

HTML

<template id="shadowtree">
    <details>
        <content></content>
    </details>
</template>
<custom-details id="host">
    <summary>Some details</summary>
    <p>More info about the details.</p>
</custom-details>

JavaScript

var CustomDetails = Object.create(HTMLElement.prototype);
CustomDetails.createdCallback = function() {
    var shadowRoot = host.createShadowRoot();
    var clone = document.importNode(shadowtree.content, true);
    shadowRoot.appendChild(clone);
};

var CDetails = document.registerElement('custom-details', {
  prototype: CustomDetails
});