Shadow DOM

by ktsn

HTML

<p class="text">Outside</p>
<div id="app"></div>

CSS

.text {
  color: blue;
}

JavaScript

const el = document.getElementById('app')

// Shadow DOM のルートを生成
const shadow = el.attachShadow({ mode: 'open' })

// Shadow DOM の内部にスタイルと要素を追加
shadow.innerHTML = `
<style>
.text {
  color: red;
}
</style>
<p class="text">Inside</p>
`