Shadow DOM

👉 JSFiddle에서 Shadow DOM 예시 확인하기

web에서 중요한 것은 캡슐화이다. 캡슐화를 통해 다른 부분에는 영향을 주지도, 받지도 않으면서 그 자체의 구조, 스타일, 행동을 유지할 수 있게 된다.

shadow DOM은 DOM을 캡슐화한 것이다. shadow DOM을 통해 element에 캡슐화된 DOM을 붙일 수 있게 된다.

📕 A DOM within a DOM

shadow DOM을 "DOM 안의 DOM"로 생각하면 된다. shadow DOM은 원래의 DOM과는 완전히 분리되어, 그 자체의 element와 스타일을 갖고 있는 DOM 트리이다.

DOM의 lite 버전이며, DOM과 마찬가지로 HTML을 표현하고, 어떤것을 렌더링할지를 결정한다. 그러나, shadow DOM은 항상 DOM에 붙어있어야 한다.

📕 Shadow DOM 구조

• shadow host : shadow DOM이 붙을 수 있는 일반적인 DOM node이다.
• shadow tree : shadow DOM 안에 있는 DOM tree이다.
• shadow boundary : shadow DOM이 끝나고, 일반적인 DOM이 시작하는 영역이다.
• shadow root : shadow tree의 root이다.

shadow DOM 안에 있는 노드에도, non-shadow node와 같은 방식으로 영향을 줄 수 있다. children을 붙이거나, 속성을 설정하거나, element.style로 스타일을 설정하는 방식을 쓸 수 있다. 그러나, shadow DOM 안에 있는 것들은 바깥에 영향을 끼치지 못한다.

📕 브라우저에서의 shadow dom

브라우저는 오랫동안 element 내부 구조를 캡슐화해왔다.
예를 들어, video element는 여러 버튼과 컨트롤들이 shadow DOM안에 존재한다.

📕 Basic Usage

Element.attachShadow() 메소드를 통해 shadow root를 붙일 수 있다.
이 메소드는 mode 라는 옵션을 갖는 옵션 객체를 파라미터로 받는다.

• open : main page context에서 js로 shadow에 접근할 수 있다.
• clsoed : 바깥에서 shadow dom에 접근할 수 없다.

const shadowEl = document.querySelector('.shadow-host');
const shadow = shadowEl.attachShadow({mode:'closed'});

console.log(shadowEl.shadowRoot); // null

출처

• what is the shadow dom - bitsofcode
• Using shadow DOM