TAG
JavaScript
Result
Run
License
<div class="shadow-wrap"> <h2 class="title">Shadow DOM Style TEST</h2> </div>
window.addEventListener("DOMContentLoaded", () => { document.body.classList.add("body"); const elShadowRoot = document.querySelector(".shadow-wrap"); const elStyle = document.createElement("style"); const elTitle = document.createElement("h1"); const elP = document.createElement("p"); const elShadow = elShadowRoot.attachShadow({ mode: "open" }); elTitle.textContent = "Hello"; elP.textContent = "Shadow DOM"; // 쉐도우 호스트 상위에 .body 존재 여부에 따라 호스트가 사용 elStyle.textContent = ` :host-context(.body) h1 { color: #FF0000; } `; elShadow.append(elStyle, elTitle, elP); document.body.append(elShadowRoot); });
Console
expand_less
License
License
by DevDic
Close