본문 바로가기

Front-End/Javascript

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를 넘지 못하기 때문에 제 컨텐츠를 침범하지 못한다. 


'Front-End > Javascript' 카테고리의 다른 글

Prototype, Object 이해하기  (0) 2017.11.04
Closure  (0) 2017.06.20
Shadow DOM  (0) 2017.04.28
문서 스크립팅  (0) 2017.04.27
Section 5:Object-Oriented Javascript and Prototypal Inheritance  (0) 2017.04.25
Section4 : Objects and Functions  (0) 2017.04.24