Shadow Dom

Shadow Dom 이란?

> 웹 컴포넌트 캡슐화를 위해, lite 버전의 dom을 생성하는 것

 

실제로 흔하게 사용되는 shadow dom을 보고 싶다면?

개발자 도구 → Settings → Preferences → Elements → Show user agent shadow DOM 체크

range input이 shadow dom으로 이루어져 있다는 걸 볼 수 있다.

<input type="range">

하나의 html element가 자체 스코프를 가진 shadow root을 생성하고, 그 안에서 div들로 구현된 range 가 실제로 구현된다.
(shadow dom 자체가 하나의 dom이기 때문에, id="track", id="thumb"는 상위 dom의 id와 무관하게 선언해서 사용이 가능하다)

---

위 예시는 shadow DOM을 포함하는 기본 요소 예시이고, 실제 shaodw DOM을 구현하기 위해서는 다음과 같이 attachShadow 메소드를 통해 element에 shadow DOM을 추가해야 한다.

let shadow = elementRef.attachShadow({mode: 'open'});
let shadow = elementRef.attachShadow({mode: 'closed'});

mode 같은 경우에는, 외부 DOM에서 해당 엘리먼트의 shadow DOM에 접근이 가능하게 할 것인지에 대한 여부이다.

open 모드의 경우에는 elementRef.shadowRoot; 를 통해 DOM 접근이 가능해진다.
closed 모드에서는 초기에 attachShadow를 통해 return 받은 shadowRoot를 제외하고는 element를 통해 shadowRoot 접근이 불가능해진다.

 

 

Shadow DOM 201: CSS and Styling - HTML5 Rocks

 

Shadow DOM 301: Advanced Concepts & DOM APIs - HTML5 Rocks