Articles
JavaScript 소개
쉐도우 DOM이란 무엇인가요?

쉐도우 DOM이란 무엇인가요?

이 글은 쉐도우 DOM이 무엇인지 설명합니다.

YouTube Video

쉐도우 DOM 이해하기

쉐도우 DOM은 웹 컴포넌트 표준의 강력한 기능으로, 컴포넌트 내에서 스타일과 DOM 구조를 캡슐화할 수 있도록 합니다. 이 기능은 컴포넌트와 메인 문서 간의 스타일 및 스크립트 간섭을 방지합니다.

쉐도우 DOM이란 무엇인가요?

쉐도우 DOM은 일반 DOM 요소와 연결된 스코프 DOM 트리를 만드는 방법을 제공합니다. 이 쉐도우 트리는 전체 문서에서 격리되어 외부 스타일과 스크립트가 영향을 미치지 않으며, 내부 스타일 및 스크립트도 외부로 누출되지 않습니다.

예를 들어, 쉐도우 DOM을 사용하여 사용자 정의 버튼 컴포넌트를 만들면 해당 스타일이 페이지의 다른 요소에 영향을 미치지 않습니다. 마찬가지로 동일한 클래스 이름을 가진 요소들도 충돌하지 않습니다.

쉐도우 DOM의 장점

  1. 캡슐화: 쉐도우 DOM은 스타일과 기능을 분리하여 글로벌 스타일 및 스크립트와의 충돌을 방지합니다.

  2. 재사용성: 쉐도우 DOM으로 만든 컴포넌트는 스타일 충돌에 대해 걱정하지 않고 다양한 프로젝트에서 재사용할 수 있습니다.

  3. 유지 보수성: 캡슐화로 인해 컴포넌트가 로직과 스타일 측면에서 독립적이 되어 디버깅과 유지 보수를 쉽게 만듭니다.

쉐도우 DOM 생성하기

쉐도우 DOM을 사용하려면 HTML 요소에 쉐도우 루트를 첨부해야 합니다. 다음은 간단한 예제입니다:.

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

설명

  1. 호스트 요소: 쉐도우 루트가 첨부되는 일반 DOM 요소 (#shadow-host의 경우).

  2. 쉐도우 루트: attachShadow를 사용하여 생성된 쉐도우 트리의 루트.

  3. 모드: open 모드에서는 외부 JavaScript가 element.shadowRoot를 통해 쉐도우 루트에 접근할 수 있습니다. 반면에, closed 모드는 접근을 허용하지 않습니다.

쉐도우 DOM 내에서 스타일링하기

Shadow DOM은 자체 스타일 범위를 가지고 있습니다. Shadow 트리 내에서 정의된 스타일은 해당 트리 내의 요소에만 적용됩니다. 다음은 예제입니다:.

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

메인 문서에 충돌하는 스타일이 있더라도, Shadow 트리 내의 단락은 영향을 받지 않습니다:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

Shadow DOM 내의 단락은 초록색을 유지하고, 외부 단락은 빨간색으로 표시됩니다.

Shadow DOM 내에서의 이벤트

Shadow DOM 내의 이벤트는 일반 DOM 이벤트와 유사하지만 캡슐화로 인해 전파 방식이 다를 수 있습니다. Shadow 트리 내에서 발생하는 이벤트는 호스트 요소로 버블링되지만 전체 문서로 직접 버블링되지 않습니다.

다음은 예제입니다:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

버튼이 클릭되면 두 리스너가 모두 작동하여 이벤트 버블링의 동작을 보여줍니다.

슬롯: Light DOM 콘텐츠의 분배

슬롯을 사용하면 Light DOM의 콘텐츠를 Shadow DOM으로 투영할 수 있습니다. 다음은 예제입니다:.

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

메인 문서에서는 다음과 같이 할 수 있습니다:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

Shadow DOM 내의 slot 요소는 해당 slot 속성을 가진 Light DOM 콘텐츠를 표시합니다.

결론

Shadow DOM은 강력하고 재사용 가능하며 유지보수하기 쉬운 웹 컴포넌트를 만들기 위한 중요한 도구입니다. 스타일과 기능을 캡슐화함으로써 충돌 가능성을 줄이고 코드베이스 관리를 단순화합니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

자바스크립트와 HTML