Shadow DOM Theming

by ktsn

HTML

<div id="app"></div>

CSS

:root {
  --text-color: green;
}

JavaScript

const el = document.getElementById('app')

const shadow = el.attachShadow({ mode: 'open' })

shadow.innerHTML = `
<style>
/* Custom Property でスタイルを定義 */
.text {
  color: var(--text-color, blue);
}
</style>

<p class="text">Shadow DOM Text</p>
`