JSFiddle - React, Tailwind, and code Playground

HTML

<template>
    <style>
        ::content > p {
            background-color: blue;
            display: inline-block;
            font-size: 0.7em;
        }
    </style>
<div class="card-header">
  ABC
  <content select=""></content>
</div>
</template>


<div class="a">
    <p>
        ABC
    </p>
</div>

JavaScript

var root = document.querySelector('.a').createShadowRoot();
var template = document.querySelector('template');

var clone = document.importNode(template.content, true);

root.appendChild(clone);