Shadow DOM

Shadow DOM이란?

---

 Document Object Model, 즉 DOM은 HTML과 XML 문서의 내용을 조작할 수 있는  API이다. HTML의 요소 집합(태그) 들이 

스타일 캡슐화(Encapsulation)

---

 Shadow DOM의 핵심 기능 중에 하나는 shadow boundary이다. 이게 무슨 말이냐 하면, 스타일의 경계가 생긴다는 것이다. 즉, 내가 원하는 경계 내에서만 적용을 할 수 있다는 것이다.  

 Shadow DOM 내의 CSS 스타일들은 Shadow Root로 범위가 지정이 되어, 스타일이 캡슐화된다!

 예제를 보면

브라우저가 Shadow DOM을 지원한다면 "Shadow DOM"을 볼 수 있다.

 위의 결과를 통해 2가지 사실을 알 수 있다.

• 이 페이지 내에 다른 h3들이 있지만 단 하나만이 h3 셀렉터와 매칭되며 붉은 색상으로 적용되는 것은 ShadowRoot내의 것이다. 스타일에 대한 scope는 기본사항이다.

• 다른 h3을 대상으로 하는 스타일 규칙들은 Shadow Boundary를 넘지 못하기 때문에 제 컨텐츠를 침범하지 못한다.