캡슐화 기능을 제공하는 DOM이다.
독립된 DOM으로 해당 컴포넌트에만 종속된다. 따라서 document.querySelector 등으로 DOM탐색이 불가하다.
마찬가지로 Shadow DOM에 선언된 CSS 또한 해당 컴포넌트 안에서만 유효하므로 단순한 css선택자 사용과 네이밍 충돌을 걱정하지 않아도 된다. 반면 이와 비슷한 리액트의 styled-component의 경우 해당 컴포넌트에만 적용한다는 점은 같지만 내부 작동원리가 해당컴포넌트마다 유일한 클래스를 부여하여 스타일을 적용하는 방식으로 결국 styled-component는 전역에 스타일이 적용된다는 점에서 차이가 있다.
<참고자료>
https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_shadow_DOM
Using shadow DOM - 웹 컴포넌트 | MDN
웹 컴포넌트의 중요한 측면은 캡슐화입니다. 마크업 구조, 스타일 그리고 동작을 페이지 내의 다른 코드와 분리하고 숨긴채로 유지하여 서로 충돌하지 않으며, 코드가 좋고 깨끗하게 되도록 하
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot
Element.shadowRoot - Web APIs | MDN
The Element.shadowRoot read-only property represents the shadow root hosted by the element.
developer.mozilla.org
https://www.youtube.com/watch?v=qfp6AGcVnDQ
styled-component 작동원리에 관한 글
'basic > Vanilla.js' 카테고리의 다른 글
| Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". (0) | 2022.02.08 |
|---|---|
| IntersectionObserver (0) | 2022.01.18 |
| 배열 중복제거 (ES6에 추가된 Set객체 이용하기) (0) | 2021.12.21 |
| eslint + prettier 설정 (0) | 2021.12.01 |
| replace() 전체 수정하는 방법 (0) | 2021.11.21 |