Styling Shadow DOM

by Aggre _--

HTML

<p>
	ここは Shadow DOM の外側です。
</p>
<button class=btn>button</button>

<x-app></x-app>

CSS

p {
	color: blue
}

x-app {
	background: blue
}

JavaScript

window.customElements.define('x-app', class extends HTMLElement {
	connectedCallback() {
		this.attachShadow({mode: 'open'}).innerHTML = `
			<style>
				@import '//unpkg.com/spectre.css/dist/spectre.min.css';
				:host {
					display: block;
					margin: 1rem;
					padding: 1rem;
					background: red;
				}
				:host(:hover) {
					background: coral;
				}
				p {
					color: white;
				}
			</style>
			<p>ここは内側です。</p>
			<button class=btn>button</button>
		`
	}
})