Shadow DOM 톺아보기 🔎

우혁·2024년 8월 5일

FE

목록 보기

6/11

Shadow DOM이란?

웹 컴포넌트의 핵심 기술 중 하나로, HTML 문서 내에서 독립적인 DOM 트리를 생성할 수 있게 해주는 기능이다.
이를 통해 개발자는 스타일과 자바스트립트가 서로 충돌하지 않도록 격리된 환경을 제공할 수 있다.

Shadow DOM의 주요 특징

1. 캡슐화: Shadow DOM은 외부 스타일과 자바스크립트의 영향을 받지 않는 독립적인 DOM 구조를 생성한다.
이것은 다른 컴포넌트나 문서의 CSS와 JavaScript와 충돌을 방지한다.

2. 구조화: 복잡한 UI 요소를 구조적으로 나눌 수 있다. 각 컴포넌트는 자체적인 DOM을 가지므로, 코드의 가독성과 유지보수성이 향상된다.

3. 스타일 격리: Shadow DOM 내의 스타일은 항상 Shadow DOM에만 적용되며, 외부 스타일은 영향을 미치지 않는다. 따라서, 스타일의 충돌을 걱정할 필요가 없다.

4. 재사용성: Shadow DOM을 이용하면 UI 컴포넌트를 쉽게 재사용할 수 있다. 이 컴포넌트는 다양한 프로젝트에서 독립적으로 사용할 수 있다.

Shadow DOM의 구조

Shadow DOM은 숨겨진 DOM 트리가 통상적인 DOM 트리에 속한 요소에 부착될 수 있게 한다.

이 Shadow DOM 트리는 shadow root에서 시작되며, 원하는 모든 요소 안에 부착될 수 있다.

이 과정은 일반 DOM에서 요소를 추가하는 방법과 동일하다.

💡 Shadow DOM 용어

Shadow host: Shadow DOM이 부착되는 통상적인 DOM 노드

Shadow tree: Shadow DOM 내부의 DOM 트리

Shadow boundary: Shadow DOM이 끝나고, 통상적인 DOM이 시작되는 장소

Shadow root: Shadow 트리의 root 노드

Shadow DOM의 사용 방법

Element.attachShadow() 메소드를 사용하여 어떠한 요소에든 Shadow root를 부착할 수 있다.

이 메소드는 매개변수로 하나의 모드를 포함하는 모드 객체를 필요로 한다.

이 메소드는 HTML 요소에 대해 Shadow root를 생성한다.

🚨 주의 사항
주로 상호 작용하는 특정 요소들은 Shadow host가 될 수 없기 때문에, 단순히 <a> 요소를 Shadow host로 사용할 수 없다!

// HTML 요소 선택
const hostElement = document.querySelector('.element');

// Shadow DOM 생성
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // or ({ mode: "closed" })

// Shadow DOM에 콘텐츠 추가
shadowRoot.innerHTML = `
  <style>
    p {
      color: blue;
    }
  </style>
  <p>Hello, Shadow DOM!</p>
`;

Shadow DOM의 모드

Shadow DOM은 두 가지 모드를 지원한다.

Open: Shadow DOM에 접근할 수 있는 API가 제공된다. 외부에서 Shadow DOM의 내용을 읽거나 수정할 수 있다.
Closed: Shadow DOM에 대한 접근이 제한된다. 외부에서 Shadow DOM의 내용을 직접적으로 접근할 수 없다.

Shadow DOM 직접 사용해보기

1. Shadow root 생성하기

  <body>
    <div class="shadow-host">
      <a href="https://velog.io/@woogur29/posts"> 블로그 포스팅 바로가기</a>
    </div>
    <script>
      const shadowHostElement = document.querySelector(".shadow-host");
	  // host에 Shadow DOM 붙이기위해 attachShadow() 메소드 사용
      const shadowRoot = shadowHostElement.attachShadow({ mode: "open" });
    </script>
  </body>

이 코드는 Shadow host의 자식 요소인 빈 Shadow root를 생성한다. <html> 요소가 DOM의 시작인 것 처럼 Shadow root는 Shadow DOM의 시작점 역할을 한다.

일반 HTML 자식 요소(<a>)는 개발자 도구에서 확인되긴 하지만 Shadow root가 차지하면서 더 이상 화면에 보이지 않게 된다.

2. Shadow tree를 만들기 위한 콘텐츠 생성하기

Shadow tree는 DOM tree와 비슷하지만 일반 DOM 대신 Shadow DOM을 사용한다.

const link = document.createElement("a");
link.href = shadowHostElement.querySelector("a").href;
link.innerHTML = `${shadowHostElement.querySelector("a").textContent}`;
shadowRoot.appendChild(link);

일반적인 방법과 동일하게 appendChild() 메소드를 사용하여 Shadow DOM에 새로운 요소를 추가한다.

이 시점에서 해당 요소는 아래와 같다.

3. 스타일 추가하기

const styles = document.createElement("style");
styles.textContent = `
a {
  text-decoration: none;
  color: #20c997;
  font-weight: 800;
}`;
shadowRoot.appendChild(styles);

Shadow DOM을 이용한 스타일과 자바스크립트 격리

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow DOM 예제</title>
    <style>
        /* 부모 요소의 CSS */
        .parent {
            background-color: red; /* 부모 배경색 */
            padding: 20px;
        }

        /* 부모의 버튼 스타일 */
        .parent button {
            color: white;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="parent">
        <h1>부모 요소</h1>
        <button onclick="alert('부모 버튼 클릭!')">부모 버튼</button>

        <!-- Shadow DOM을 사용할 요소 -->
        <div id="shadow-host"></div>
    </div>

    <script>
        // Shadow DOM 생성
        const shadowHost = document.getElementById('shadow-host');
        const shadowRoot = shadowHost.attachShadow({ mode: 'open' });

        // Shadow DOM 내의 HTML 및 CSS 추가
        shadowRoot.innerHTML = `
            <style>
                /* Shadow DOM 내의 CSS */
                .child {
                    background-color: blue; /* Shadow DOM 내의 배경색 */
                    color: white;
                    padding: 10px;
                    border: 1px solid black;
                }
            </style>
            <div class="child">
                <h2>Shadow DOM 요소</h2>
                <button id="shadow-button">Shadow DOM 버튼</button>
            </div>
        `;

        // Shadow DOM 내의 버튼 클릭 이벤트 리스너
        const shadowButton = shadowRoot.getElementById('shadow-button');
        shadowButton.addEventListener('click', () => {
            alert('Shadow DOM 버튼 클릭!');
        });
    </script>
</body>
</html>

스타일 격리

일반 DOM: 모든 스타일이 전역적으로 적용된다. 즉, 부모 요소의 스타일이 자식 요소에 영향을 미칠 수 있다.
Shadow DOM: Shadow DOM 내에서 정의한 스타일은 해당 DOM에만 적용된다. 외부 스타일이 Shadow DOM 내의 요소에 영향을 미치지 않는다. 따라서 스타일의 충돌을 방지할 수 있다.

스크립트 격리

일반 DOM: 모든 이벤트 리스너와 스크립트가 전역적으로 작동한다. 여러 요소가 같은 이벤트 리스너를 공유할 경우, 예기치 않은 동작이 발생할 수 있다. 예를 들어 동일한 ID를 가진 요소가 있을 경우 스크립트가 충돌할 수 있다.
Shadow DOM: Shadow DOM 내의 이벤트 리스너는 외부 DOM과 독립적으로 작동한다. Shadow DOM 내에서 설정한 이벤트 리스너는 해당 DOM에만 적용되면 외부 DOM의 요소와는 별개로 작동한다. 이는 코드의 일관성과 유지보수성을 높여준다.

재사용성

일반 DOM: UI 컴포넌트를 재사용하려면 스타일과 스크립트가 충돌하지 않도록 신경써서 관리해야 한다. 그로 인해 코드의 복잡성이 증가할 수 있다.
Shadow DOM: Shadow DOM을 사용하면 재사용 가능한 컴포넌트를 쉽게 만들 수 있다. 각 컴포넌트는 독립적인 스타일과 스크립트를 가지므로, 다른 프로젝트나 컨텍스트에서 쉽게 재사용 할 수 있다.

사용 사례

UI 라이브러리: 복잡한 UI 요소(ex. button, modal, dropdown 등)를 만들 때 Shadow DOM을 사용하여 스타일과 동작을 독립적으로 유지할 수 있다.
웹 컴포넌트: 재사용 가능한 웹 컴포넌트를 만들 때 Shadow DOM을 통해 각 컴포넌트의 스타일과 구조를 격리할 수 있다.

📝 정리하기

Shadow DOM은 스타일과 스크립트의 충돌을 방지하여 더욱 견고하고 재사용 가능한 컴포넌트를 만들 수 있게 해준다. 일반 DOM에서는 버튼을 추가하는 것만으로는 이러한 격리와 독립성을 보장할 수 없기 때문에, 복잡한 UI를 관리하는 데 있어 Shadow DOM이 유리하다.

🙃 도움이 되었던 자료들

shadow DOM 사용하기 - MDN
(번역) Shadow DOM은 무엇일까?

우혁

🏁

이전 포스트

Zero-Runtime CSS 라이브러리 비교하기

다음 포스트

자바스크립트의 동작 원리(실행 컨텍스트, 비동기, 이벤트 루프)

2개의 댓글

진돌

2024년 8월 6일

처음 들어본 개념인데, 스타일 격리되는게 레거시 코드를 건드리게 되는 날에는 유용할 것 같네요.
좋은 글 감사합니다.

1개의 답글