Shadow DOM - DOM을 캡슐화 하자!

Shadow DOM이란?

웹 페이지의 DOM 트리 안에 또 다른 독립되는 DOM 트리를 생성하는 방식입니다. Shadow DOM을 이용하면 웹 페이지 내의 요소들을 잘 캡슐화하여 외부에서의 접근 제한하고, 컴포넌트 간의 의존성을 관리할 수 있습니다.

<input> 의 date와 range 타입

우리가 많이 사용하는 input, button, video.. 등등 html 요소들이 shadow DOM으로 만들어진 요소들입니다.

이런 요소는 이미 기능, 동작, 모양, 스타일 등등 이미 만들어져 있는 템플릿이라고 볼 수 있습니다. 많은 div, span 등 그리고 내부 스크립트와 스타일 등을 결합하여 캡슐화하면 이렇게 shadow DOM을 만들 수 있습니다.

기본으로 제공하는 이런 html 요소 뿐만 아니라, 우리도 shadow DOM을 만들 수 있습니다.

이 shadow DOM을 만드는 방법에 대해 알아보겠습니다.

Shadow DOM을 만드는 방법

개발자 도구에서 shadow DOM을 까보기

개발자 도구 열기

• 위의 그림과 같이 F12을 눌러서 개발자 도구를 열면 오른쪽 상단에 Preferences 아이콘이 있습니다.

Shadow DOM 보기 활성화

• 이 아이콘을 누르고 중간지점 Elements 설정의 첫 번째 “Show user agent shadow DOM”라는 체크박스를 활성화합니다.

Shadow DOM이 보이는 모습

• 그럼 위의 그림과 같이 요소 내부 Shadow DOM을 볼 수 있습니다.

Shadow DOM 만들기

shadow DOM을 만들기 전에 html에 다음과 같은 요소가 있다고 가정합니다.

<div class=".shadow-dom-element"></div>

1. 요소 선택: Shadow DOM을 생성할 요소를 선택합니다. 저는 “.shadow-dom-element” 라는 클래스를 포함시킨 div를 선택하겠습니다.

const shadowDomElement = document.querySelector(".shadow-dom-element");

2. shadowRoot 생성: 선택한 요소의 shadowRoot 프로퍼티를 사용하여 shadowRoot 객체를 생성합니다.

const shadowRoot = shadowDomElement.attachShadow({mode: 'open'});

3. 내부 HTML 삽입: shadowRoot 객체의 innerHTML 프로퍼티를 사용하여 Shadow DOM 내부에 HTML을 삽입합니다.

shadowRoot.innerHTML = `
  <style>
    /* Shadow DOM에 적용할 스타일 작성 */
  </style>
  <div>
    <!-- Shadow DOM에 포함될 HTML 작성 -->
  </div>
`;

심화 - shadow DOM 생성 함수

function createShadowDOM(selector, html) {
  const element = document.querySelector(selector);
  const shadowRoot = element.attachShadow({mode: 'open'});
  shadowRoot.innerHTML = html;
}

createShadowDOM('div', `
  <style>
		div {
		  background-color: #f5f5f5;
		  padding: 10px;
		  border-radius: 5px;
		}
		p {
		  font-size: 16px;
		  color: #333;
		}
	</style>
  <div>
    <p>Shadow DOM을 만드는 방법을 알아보자!</p>
  </div>
`);

slot 사용하기

Shadow DOM을 사용하면 HTML 요소의 스타일과 동작을 캡슐화하고 격리된 스타일을 적용할 수 있습니다. 이를 통해 모듈화된 컴포넌트를 만들고 재사용할 수 있습니다. 이때, slot 요소를 사용하면 Shadow DOM 안에서 외부에서 전달한 콘텐츠를 삽입할 수 있습니다.

slot 요소

slot 요소는 Shadow DOM 안에서 외부에서 전달한 콘텐츠를 삽입하는 데 사용됩니다. slot 요소는 Shadow DOM에서 slot 요소를 포함하는 요소에 대응됩니다.

다음은 slot 요소를 사용하여 Shadow DOM 안에 외부에서 전달한 콘텐츠를 삽입하는 예제입니다.

<template id="my-component">
  <style>
    .container {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
  <div class="container">
    <slot></slot>
  </div>
</template>

<my-component>
  <p>Hello World!</p>
</my-component>

위의 코드에서는 **my-component**라는 사용자 정의 요소를 정의하고, slot 요소를 사용하여 외부에서 전달한 콘텐츠를 삽입합니다.

slot 이름 붙이기

slot 요소에는 이름을 지정할 수 있습니다. 이를 통해 여러 개의 slot 요소를 사용할 수 있습니다.

<template id="my-component">
  <style>
    .container {
      border: 1px solid black;
      padding: 10px;
    }
    .title {
      font-weight: bold;
      font-size: 20px;
      margin-bottom: 10px;
    }
  </style>
  <div class="container">
    <h2 class="title"><slot name="title"></slot></h2>
    <div class="content"><slot name="content"></slot></div>
  </div>
</template>

<my-component>
  <div slot="title">Hello World</div>
  <p slot="content">This is the content of the component.</p>
</my-component>

위의 코드에서는 slot 요소에 이름을 지정하여 여러 개의 slot 요소를 사용합니다. name 속성을 사용하여 slot 요소의 이름을 지정할 수 있습니다.

Shadow DOM쓰면 뭐가 좋은가?

1. 캡슐화: Shadow DOM은 캡슐화된 공간 안에서 동작하기 때문에, 외부에서의 접근을 제한할 수 있습니다. 이를 통해 개발자는 특정 요소의 스타일과 동작을 보호할 수 있습니다.
2. 격리된 스타일: Shadow DOM 내부에서 정의된 CSS는 기존의 CSS와 격리되어 적용됩니다. 이를 통해, 외부에서의 CSS가 Shadow DOM 안에 있는 요소에 영향을 주는 것을 막을 수 있습니다.
3. 모듈화: Shadow DOM을 사용하면 개발자는 각각의 요소를 모듈화 할 수 있습니다. 이를 통해, 코드의 가독성과 유지 보수성이 향상됩니다.
4. 사용자 지정 요소: Shadow DOM은 사용자 지정 요소(custom element)를 구현하는 데 매우 유용합니다. 이를 통해, 개발자는 HTML 요소에 존재하지 않는 새로운 기능을 구현할 수 있습니다.
5. 개발자 간의 협업: Shadow DOM을 사용하면 개발자 간의 협업이 용이해집니다. 각각의 요소가 독립적으로 존재하기 때문에, 개발자들은 서로의 코드를 침범하지 않고 각각의 요소를 동시에 작업할 수 있습니다.

참고

브라우저별 Shadow DOM 지원 버전

브라우저별 Shadow DOM 지원 버전

Shadow DOM은 크롬 53버전, Edge 79 버전, safari 10 버전, firefox 63 버전 등등부터 지원합니다.

거의 다 지원한다고 볼 수 있지만, IE에서는 지원하지 않습니다.