[JavaScript] Shadow DOM 다루기

 

 

 

다른 사람이 만든 자바스크립트 라이브러리를 사용해 원하는 기능을 구현하고, CSS를 적용할 때 렌더링된 결과를 개발자 도구를 통해 살펴보면 #shadow-root 라는 부분이 나타날 때가 있다.

 

#shadow-root는 웹 컴포넌트의 Shadow DOM을 나타내는 용어로, 스타일과 마크업을 실제 DOM에서 격리시켜 컴포넌트의 내부 구현을 캡슐화하는 도구로 사용된다.

 

Shadow DOM 내부의 스타일은 해당 DOM에만 적용돼 격리된 UI 컴포넌트를 만들 때 사용할 때 사용된다.

 

Vue에서는 DOM을 추상화한 Virtual DOM을 사용해 실제 DOM에 접근하고 조작하는 비용을 최소화하고, Shadow DOM은 웹 컴포넌트의 캡슐화와 스타일 격리를 위해 사용된다. 

 

 

이전에 wav파일을 시각화하는 자바스크립트 라이브러리로 wavesurfer.js를 사용했었는데, 라이브러리로 작성한 부분에 CSS를 적용할 때 #shadow-root가 적용된 적이 있었다. 

 

 

 

 

 

 

Shadow DOM이 적용된 경우 일반적인 CSS 선택자로 CSS를 적용할 수 없다.

 

따라서 웬만한 라이브러리들은 Shadow DOM 내부 요소에 접근할 수 있는 api를 제공하는데... 제공하는 api에도 원하는 기능이 없다면? Shadow DOM 내부 요소에 직접 접근해야 한다.

 

위의 예시에서 확인할 수 있듯 Shadow DOM은 open모드 또는 closed모드로 설정할 수 있다.

open 모드에서는 외부에서 자바스크립트를 통해 Shadow DOM에 접근할 수 있지만, closed모드는 접근을 허용하지 않는다.

 

 

 

 wavesurfer.on('ready', function() {
  const waveSurferCanvas = avWaveContainer.value.querySelector('wave > canvas');
  const waveDivs = avWaveContainer.value.querySelectorAll('div');
  const shadowRoot = avWaveContainer.value.shadowRoot;
  
  if (shadowRoot) {
    const waveDivs = shadowRoot.querySelectorAll('div');
    waveDivs.forEach(div => {
      div.style.height = '100%';
    });
  }

  waveDivs.forEach(div => {
    div.style.height = '100%';
  });

  if (waveSurferCanvas) {    
    waveSurferCanvas.style.height = '100%';    
  }

});

 

 

.shadowRoot 로 Shadow DOM에 접근할 수 있고, 접근한 DOM에 css나 스크립트를 추가할 수 있다.

 

 

바로 Shadow DOM에 접근하기보다는 사용하는 라이브러리의 api 문서를 잘 살펴본 후 원하는 기능을 제공하지 않는 경우에만 직접 접근하는 방식을 사용하자