[웹 컴포넌트] Shadow DOM

들어가며

: 웹 컴포넌트의 특장점은 캡슐화이고 이를 통해 재사용 가능한 컴포넌트 제작을 쉽게 해준다.

여기서 Shadow DOM이 핵심 기술로 사용된다.

기본 설명

: Shadow DOM은 숨겨진 DOM 트리(Shadow tree)로 Shadow root에서 시작되어 원하는 어느 요소(Shadow host)에나 붙일 수 있고 일반 DOM과 마찬가지도 DOM API로 붙일 수 있다.
Shadow boundary기준으로 Event bubbles 범위가 결정 된다.

위에 언급된 Shadow DOM 용어 정의는 아래와 같다.

Shadow host: shadow DOM이 부착되는 통상적인 DOM 노드.
Shadow tree: shadow DOM 내부의 DOM 트리.
Shadow boundary: shadow DOM이 끝나고, 통상적인 DOM이 시작되는 장소.
Shadow root: shadow 트리의 root 노드.

기본 사용법

Element.attachShadow

: shadow DOM은 root 부터 tree가 생성 되어야 하므로 먼저 DOM 요소에 shadow root를 붙여야 한다. 이 때 attachShadow를 이용한다.

const domEl = document.getElementById('root');
const shadow = domEl.attachShadow({mode: 'open'}) // 'close'

여기서 인수가 open 인 경우는 외부에서 shadowRoot에 접근 가능하도록 한다.

const shadowDom = shadow.shadowRoot;

만약, 인수가 close 라면 외부에서 shadowRoot에 접근 가능하지 않고 null 을 반환하게 된다.

const el = document.createElement('div');
// undefined
el.attachShadow({mode: 'closed'});
// #shadow-root (closed)
el.shadowRoot
// null

외부에서 접근 불가능 하다는 의미는 shadowRoot의 property에 접근하고 조작할 수 없다는 이야기와 같다.

class MyButton extends HTMLElement {
	constructor() {
		super();
		this._root = this.attachShadow({mode: 'closed'});
	}
}
customElements.define('my-button', MyButton);

const myEl = document.querySelector('my-button')
myEl.shadowRoot
// null
myEl._root
// shadow-root (closed)

마치며

• Shadow DOM 은 기능과 스타일을 캡슐화 하여 custom element를 재사용 가능하게 한다.
• DOM 요소에 shadow root생성하여 부착하고 하위 Shadow Tree를 완성해 나간다.
• 외부 접근 여부를 shadow root 생성 시 결정 할 수 있다.