shadow DOM?

Shadow DOM은 HTML 요소의 DOM 계층 구조를 캡슐화하여 외부로부터 독립적인 스타일과 스크립트를 적용할 수 있도록 하는 웹 컴포넌트의 핵심 기술 중 하나입니다.

Shadow DOM을 사용하면 DOM 요소가 외부의 CSS, JavaScript, 그리고 DOM 구조로부터 영향을 받지 않도록 그림자 영역을 형성합니다.

Shadow DOM의 특징

1. 캡슐화
내부 DOM 구조는 외부에서 접근하거나 수정할 수 없고 외부 스타일이나 스크립트가 내부에 영향을 주지 않습니다.

2. 독립성
Shadow DOM 내의 스타일과 구조는 외부 DOM과 격리되어 있습니다.

3.재사용 가능
동일한 Shadow DOM을 여러 컴포넌트에서 재사용할 수 있습니다.

Shadow DOM의 구조

1. Shadow Host
   Shadow DOM을 포함하는 DOM 요소.
   <div id="host"></div>

2. Shadow Root
   Shadow DOM의 루트 영역.
   attachShadow() 메서드를 통해 생성됩니다.

3. Shadow Tree
   Shadow Root 아래의 DOM 구조.

// 1. Shadow Host 선택
const host = document.getElementById('host');

// 2. Shadow Root 생성
const shadowRoot = host.attachShadow({ mode: 'open' }); // 'open' 또는 'closed'

// 3. Shadow DOM에 콘텐츠 추가
shadowRoot.innerHTML = `
    <style>
        p {
            color: blue;
            font-weight: bold;
        }
    </style>
    <p>Hello, I am in Shadow DOM!</p>
`;

// 결과: Shadow DOM 내부는 외부 스타일의 영향을 받지 않음

Shadow DOM 모드

• mode: 'open'
  JavaScript를 통해 Shadow Root에 접근할 수 있습니다.
  예시: host.shadowRoot

• mode: 'closed'
  Shadow Root에 JavaScript로 접근할 수 없습니다.
  예시: host.shadowRoot는 null을 반환합니다.

Shadow DOM과 스타일 캡슐화

Shadow DOM은 스타일 캡슐화를 기본적으로 제공합니다.

<!-- HTML -->
<div id="host"></div>

<!-- 외부 CSS -->
<style>
  p {
    color: red; /* Shadow DOM 밖의 p 태그 */
  }
</style>

// Shadow DOM 내부
const shadowRoot = document.getElementById('host').attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
    <style>
        p {
            color: blue;
        }
    </style>
    <p>Hello from Shadow DOM!</p>
`;

// 결과: Shadow DOM 내부의 p는 파란색,
//외부의 p는 빨간색

Shadow DOM의 장점

1.스타일,구조 캡슐화
2.재사용성