Select/style across Shadow DOM boundary

by Ben Philipp

HTML

<h1>Hide the below containers</h1>
<div class="container">
      <p><b>A:</b> This should all be hidden</p>
      <div class="inner"></div>
</div>
<hr />
<p>^ Hope the red box is hidden ^</p>
<div class="container blue">
      <p><b>B:</b> This should all be hidden</p>
      <div class="inner"></div>
</div>
<hr />
<p>^ Hope the blue box is also hidden ^</p>

JavaScript

setTimeout(()=>{
	const r = document.querySelector(".container .inner");
	const el = document.createElement("div");
	el.textContent = "Because of this element";
	el.classList.add("classToMatch");
	r.appendChild(el)
}, 1000);
setTimeout(()=>{
	const b = document.querySelector(".container.blue .inner");
	const el = document.createElement("div");
	el.textContent = "Because of this element";
	el.classList.add("classToMatch");
	const shadow = b.attachShadow({ mode: "open" });
	shadow.appendChild(el)
}, 2000);