[web] shadow DOM 간단 정리

vhv3y8·2023년 11월 16일

이 글의 내용은 최선이 아니며, MDN 문서가 이 글 작성 이후 수정되어 잘 설명되어있으므로 문서를 꼭 참고하세요 :

Using shadow DOM (developer.mozilla.org)

Shadow DOM은 다음과 같은 기능들을 제공한다 :

Isolated DOM
Scoped CSS
Simplifies CSS : 이름 겹칠 걱정 X
...

Shadow DOM은 숨겨진 DOM tree를 기존 DOM tree의 element에 붙이게 해준다.

한마디로 (숨겨지는) tree를 만들어주는거고, 그 트리는 나머지 DOM과 분리되어있는거다.

용어들

Shadow host = DOM node. Shadow DOM이 붙는 곳
Shadow tree = DOM tree. Shadow DOM 안에 있는 트리를 말함
Shadow root = DOM node. Shadow 트리의 루트 노드

Shadow DOM 생성하기

<div id="host"></div>

const host = document.getElementById("host");

// Shadow DOM 생성
const shadowRoot = host.attachShadow({ mode: "open" });
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';

attachShadow() 메서드로 Shadow DOM을 생성한다.

mode : "open" | "closed" = Shadow root를 외부에서 자바스크립트로 접근가능할지 여부.

Shadow host = div#host

Shadow root = #shadow-root

Shadow tree = #shadow-root를 루트 노드로 하는 DOM 트리

Shadow Root 얻는 방법

ShadowHostElement.attachShadow() 할 때의 리턴 값
ShadowHostElement.ShadowRoot의 값

할 수 있는 것들

Shadow DOM 안에서는, 외부의 CSS가 적용되지 않는다.

그리고 style element를 직접 만들어서 적용시킬 수 있다.

const styleElem = document.createElement("style");
styleElem.textContent = `
h1 {
  background-color: #333;
  color: white;
}
`;
shadowRoot.append(styleElem);