DOM과 virtualDom. 그리고 shadowDom인데 이제 섀도우 돔을 중심으로

며칠 전, 전 직장 사수와 이야기 하다가 나온 개념.

미래에 어떻게 될 지 모르겠지만
Shadow Dom이 뜰 수도 있고,
이대로 가라앉을수도 있고.

아니 무슨 말이 이렇게 애매모호해? 그리고 shadow Dom이 뭔데? 라고 생각하고 알아보던 중, 이 친구가 근래에 나온 개념은 아니라서 상식 차원에서 알고 있으면 좋을 것 같아 간단하게나마 정리해 본다.

먼저

DOM이란?

(막상 적으려니 어떻게 정리해야할지 모르겠지만-) DOM은 Document Object Model의 약자이다. 여기서 Document는 웹 페이지/웹 문서를 의미한다. 웹 문서(document)는 objects들로 구성되어진다. 즉, DOM이란 HTML문서의 태그들이 JS가 이용할 수 있는 Object형식으로 모델링 된 것을 의미한다. 이를 통하여 DOM은 HTML과 JS를 이어주는 역할을 한다.

그 다음 많이 들어본 단어.

Virtual Dom이란?

가상돔이란 말 그대로 DOM을 가상으로 만들어 둔 것을 의미한다. 심플한 의미와는 다르게 쓰임새가 아주 깊다. 먼저 웹 브라우저는 DOM이 변경될 때 마다 전체 css를 다시 계산하고 수행하며 시간을 빼앗긴다. 그러나 virtual Dom이 등장하면서부터 방식이 변경되었다. 변경될 DOM을 가상돔에 올려두고, 현재의 DOM과 가상DOM을 비교한다(diffing). 브라우저는 두 DOM을 비교하여 서로 다른 부분에 대하여만 css를 처리한다.

DOM에 대한 사설이 길었다. 그렇다면

Shadow Dom이란?

Shadow DOM은 마크업 구조, 스타일, 동작 등을 다른 코드로부터 분리하여 각기 충돌하지 않고, 코드가 깔끔하게 유지될 수 있게 해주는것이 핵심이다. 이렇게 외부 코드의 충돌로부터 보호하는 것을 캡슐화라고 하고, Shadow DOM을 쓰는 가장 큰 이유이다. 이게 가능한 이유는 Shadow DOM은 DOM 트리에서 분리되어 개별적 요소와 스타일을 가지고 있기 때문이다. 개별적 요소와 스타일을 가지고 있기 때문에 일반 style은 영향을 미치지 못하며, Shadow DOM 접근을 위해서는 별도의 방법이 필요하다.

 

https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_shadow_DOM

상단 그림을 간단하게 설명해보면 일반 DOM트리에 shadow host가 위치해 있고, 이를 만날 때 Shadow root가 shadow host에 붙으면서 shadow tree 랜더링을 시작한다.

Shadow DOM은 다음과 같은 형식으로 create 한다. mode가 open은 element.shadowRoot()속성을 통해 접근할 수 있음을 closed는 외부로부터 shadow DOM에 접근할 수 없음을 의미한다.

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

참고로 <link> 요소는 shadow root의 페인트를 막지 않아, 스타일시트가 로딩되는 동안 스타일되지 않은 내용의 번쩍임이 있다.

https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_shadow_DOM

shadow DOM 사용하기 - 웹 컴포넌트 | MDN

 

---

왜 shadow DOM을 실무에서 많이 사용하지 않는지 이유를 찾아보고 싶었는데, 명확하게 나오는 부분이 없다.. 왜 많이 사용하지 않는걸까?

더불어 css에서 독립적인 부분은 react의 create.potal과 비슷한 기능인 것 같다.

https://hyermione.tistory.com/84

리액트 create potal 이란 무엇인가. 이제 여기에 모달 예제를 곁들여보자. 토스트 메세지도 가능하