Shadow DOM은 머리를 써서 다루기 어려운 주제입니다. 복잡할 뿐이죠. 웹에서는 익숙하지 않은 개념을 소개합니다. 섀도우 경계, 스타일 지정 범위 지정, 이벤트 재타겟팅, 삽입 지점, 섀도 삽입 지점, 호스트 노드, 분산 노드 등 다양한 용어가 계속 사용됩니다.
Shadow DOM에 대한 개념적 부담을 주는 한 가지는 브라우저가 최종 제품 (DOM)을 렌더링하는 방식입니다. 호스트 노드의 노드는 ShadowRoot의 삽입 지점으로 마법처럼 재구성되지만 논리적으로는 여전히 호스트 노드에 남아 있습니다. 이상하네요. 따라서 렌더링 시에는 원래 호스트가 아닌 섀도우 트리의 일부로 표시됩니다. 이러한 렌더링이 이루어지는 방식은 Shadow DOM에서 가장 혼란스러운 부분 중 하나입니다.
며칠 전 저는 학습 과정을 줄이는 데 도움이 되는 Shadow DOM Visualizer라는 도구를 출시했습니다.
이를 통해 브라우저에서 Shadow DOM이 어떻게 렌더링되는지 시각적으로 확인할 수 있지만 현재 DevTools에는 없습니다. 왼쪽의 검은색 코드 블록은 모두 수정할 수 있습니다. <content> 삽입 지점을 변경하거나 삽입점을 삭제하거나 새로 추가하여 합성 (렌더링된) 트리가 오른쪽에서 어떤 영향을 받는지 확인해 보세요.
그래프의 노드 위로 마우스를 가져가면 왼쪽에 있는 관련 마크업이 강조 표시됩니다. 이제 d3.js도 완성되었습니다. 파란색 노드는 호스트 노드에서 발생합니다. 노란색 노드는 Shadow DOM에서 가져옵니다. <content> 삽입점은 두 세계 사이의 브리지입니다. 이러한 요소는 논리적으로 Shadow DOM에 있으므로 노란색으로 표시됩니다. 파란색 테두리는 파란색 호스트 노드를 렌더링 파티에 초대한다는 의미입니다.
Shadow DOM은 Chrome 25에서 사용할 수 있고 <template> 요소는 Chrome 26에서 사용할 수 있습니다 (먼저 데모를 사용해 보기만 하면 됨).