JSFiddle - React, Tailwind, and code Playground

HTML

<x-widget>CONTENT1</x-widget>
<x-widget><div>CONTENT2</div></x-widget>

JavaScript

window.customElements.define('x-widget', class extends HTMLElement {
    constructor() {
        super();

        this.attachShadow({mode: 'open'});

        const template = document.createElement('template');
        template.innerHTML = `
            <div>TEMPLATE</div>
            <div><slot></slot></div>
        `;

        const style = document.createElement('style');
        style.textContent = `
            :host {
                display: content;
                contain: content;
                color: red;
            }
    
            :host::selection, ::selection {
                background: red;
                color: white;
            }
    
            ::slotted(::selection) {
                background: red;
                color: white;
            }
        `;

        this.shadowRoot.appendChild(style);
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
});