JSFiddle - React, Tailwind, and code Playground

by Aggre _--

HTML

<x-main>
	<p>Hello</p>
</x-main>

JavaScript

window.customElements.define('x-main', class extends HTMLElement {
	constructor() {
		super()
		this.attachShadow({mode: 'open'})
		this.shadowRoot.innerHTML = `<x-sub><slot></slot></x-sub>`
	}
})

window.customElements.define('x-sub', class extends HTMLElement {
	constructor() {
		super()
		this.attachShadow({mode: 'open'})
		this.shadowRoot.innerHTML = `
			<style>
				::slotted(p) {
					font-weight: bold;
				}
			</style>
			<slot></slot>
		`
	}
})