[HTML/CSS] Shadow DOM (쉐도우 돔) 이용한 디자인

1. Shadow DOM 
    웹 요소의 스타일과 구조를 캡슐화하기 위해 사용하는 기술

     *캡슐화 : 외부로 부터 웹요소를 보호하고 독립적으로 유지하기 위해 DOM으로 감싼 과정을 의미 

 

2. 왜 쓰는걸까? 

• DOM API는 자체적으로 캡슐화를 지원하지 않는다.
• 즉, 캡슐화를 하지않으면 다른 요소간 겹쳐서 충돌이 발생할 수도 있다는 점이 있어 이를 개선하기 위해? 사용하는것 같다. 
• Shadow DOM을 이용하면 외부 스타일과 격리되기 때문에 컴포넌트 내부에서 스타일을 정의하고 보수가 가능하다.

3. 기타

Shadow DOM 을 써서 일반 DOM 트리에 서브 DOM트리를 붙일 수 있다.

용어

• Shadow host : shadow DOM이 부착되는 일반적인 DOM 노드
• Shadow tree : shadow DOM 내부의 DOM 트리
• Shadow boundary :  shadow DOM이 끝나고, 일반적인 DOM이 시작되는 곳
• Shadow root : root 노드

 

사용법

 

1. Element.attachShadow() 메서드를 이용하면 어떤 요소에든 shadow root를 붙일 수 있다.

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

// mode
// open :  외부 JavaScript를 사용하여 shadow DOM에 접근할 수 있음을 의미합니다.
// close : 사용자 정의 요소에 shadow root을 부착하면, 외부 JS로 shadow DOM에 접근할 수 없음.

 

2. shadow 요소 확인하기 : 브라우저의 개발자 도구를 이용 (크롬 설정 > Elements > Show user agent shadow DOM)

shadow dom 요소

해당 요소는 브라우저에서 기본적으로 지원하는 CSS 요소이다.

이를 커스터마이징 하려면 Shadow dom안에 있는 요소를 지정해서 수정해야한다.

/* appearance: none;을 우선으로 줘야 기본 브라우저에서 제공하는 css를 없앨 수 있다. */
/* Progress bar 디자인 예시 */

progress{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: white;
 }
progress::-webkit-progress-bar{
  background-color: yellow;
  border-radius: 15px;
 }
progress::-webkit-progress-value{
  background: red;
  border-radius: 10px;
 }

요런 형태로 수정이 완료된다.

각 브라우저의 기본 CSS 

• -ms- : explorer에서만 적용
• -moz- : firefox에서만 적용
• -webkit- : 크롬 사파리 edge에서만 적용되는 스타일