Styling Shadow DOM

by Aggre _--

HTML

<x-app></x-app>

JavaScript

window.customElements.define('x-app', class extends HTMLElement {
	connectedCallback() {
		this.attachShadow({mode: 'open'}).innerHTML = `
			<style>
				:host {
					display: inline-block;
					padding: 1rem;
					background: chocolate;
				}
				:host(:hover) {
					background: coral;
				}
				p {
					color: white;
				}
			</style>
			<p>ここは内側です。</p>
		`
	}
})