집 > 기사 > 웹 프론트엔드 > Shadow DOM 이해: 캡슐화된 웹 구성 요소의 핵심

Shadow DOM 이해: 캡슐화된 웹 구성 요소의 핵심

WBOY원래의: 2024-07-17 16:19:27571검색

Understanding Shadow DOM: The Key to Encapsulated Web Components

현대 웹 개발에서는 재사용 및 유지 관리가 가능한 구성 요소를 만드는 것이 필수적입니다. 웹 구성 요소 표준의 일부인 Shadow DOM은 이 목표를 달성하는 데 중요한 역할을 합니다. 이 글에서는 Shadow DOM의 개념과 이점, 프로젝트에서 이를 효과적으로 사용하는 방법을 자세히 설명합니다.

Shadow DOM이란 무엇입니까?

Shadow DOM은 웹 구성 요소 내부에 DOM 및 CSS의 일부를 캡슐화하여 문서의 나머지 부분과 격리되도록 하는 기술입니다. 이러한 캡슐화는 스타일과 스크립트가 내부로 유출되거나 외부로 유출되는 것을 방지하여 모듈식 및 유지 관리 가능한 구성 요소를 더 쉽게 구축할 수 있게 해줍니다.

Shadow DOM의 주요 개념

섀도우 트리: 웹 구성 요소에 연결된 별도의 숨겨진 DOM 트리입니다.
섀도우 루트: 섀도우 트리의 루트 노드입니다.
섀도우 호스트: 섀도우 트리를 호스팅하는 일반 DOM 요소입니다.
섀도우 경계: 섀도우 트리와 일반 DOM 사이의 경계입니다.

Shadow DOM의 이점

1. 캡슐화

Shadow DOM은 구성 요소의 내부 구조와 나머지 애플리케이션을 깔끔하게 분리합니다. 이 캡슐화는 스타일과 동작 충돌을 방지하여 구성 요소를 더욱 예측 가능하게 만들고 유지 관리하기 쉽게 만듭니다.

2. 스타일 분리

Shadow DOM을 사용하면 섀도우 트리 내부 콘텐츠에만 적용되는 스타일을 정의할 수 있습니다. 이러한 격리를 통해 구성 요소의 스타일이 페이지의 나머지 부분에 영향을 주지 않으며 그 반대의 경우도 마찬가지입니다.

3. 향상된 재사용성

캡슐화된 구성요소는 독립형이므로 재사용이 더 쉽습니다. 통합 문제에 대한 걱정 없이 다양한 프로젝트에서 이러한 구성요소를 쉽게 공유하고 사용할 수 있습니다.

Shadow DOM 생성

JavaScript로 Shadow DOM을 생성하는 간단한 예를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow DOM Example</title>
</head>
<body>
    <my-component></my-component>

    <script>
        class MyComponent extends HTMLElement {
            constructor() {
                super();
                // Attach a shadow root to the element
                const shadow = this.attachShadow({ mode: 'open' });

                // Create some content for the shadow DOM
                const container = document.createElement('div');
                container.textContent = 'Hello, Shadow DOM!';
                container.style.color = 'blue';

                // Append the content to the shadow root
                shadow.appendChild(container);
            }
        }

        // Define the new element
        customElements.define('my-component', MyComponent);
    </script>
</body>
</html>

이 예에서는 새로운 맞춤 요소 를 정의합니다. 생성자 내에서 this.attachShadow({ mode: 'open' })을 사용하여 섀도우 루트를 연결한 다음 여기에 일부 콘텐츠를 추가합니다. 섀도우 루트 내에 정의된 스타일은 문서의 나머지 부분과 격리됩니다.

Shadow DOM 모드

섀도우 루트를 생성할 때 모드를 열림 또는 닫힘으로 지정할 수 있습니다.

개방 모드: JavaScript를 사용하여 섀도우 루트에 액세스할 수 있으므로 상호 작용 및 조작이 가능합니다.
폐쇄 모드: 섀도우 루트는 JavaScript에서 액세스할 수 없으므로 더 높은 수준의 캡슐화를 제공합니다.

폐쇄 모드의 예

const shadow = this.attachShadow({ mode: 'closed' });

이 모드에서는 구성 요소 외부에서 섀도우에 액세스할 수 없으므로 추가 보호 계층이 추가됩니다.

Shadow DOM 스타일링

Shadow DOM 내부에서 직접 스타일을 정의할 수 있습니다. 이러한 스타일은 섀도우 트리 내의 콘텐츠에만 적용됩니다.

const style = document.createElement('style');
style.textContent = `
    div {
        font-size: 20px;
        color: red;
    }
`;
shadow.appendChild(style);