CSS Shadow DOM 및 CSS Custom Shadow Parts 탐색

Source: Dev.to

현대 웹 개발은 재사용 가능하고 캡슐화된 컴포넌트를 구축하는 것을 강조합니다—이 목표를 Shadow DOM과 CSS Custom Shadow Parts가 직접 해결합니다. 이러한 브라우저 기능은 컴포넌트 내부를 전역 페이지와 격리시켜 스타일 누출 및 충돌을 방지하면서도 제어된 커스터마이징을 허용합니다.

Shadow DOM이란?

Shadow DOM은 웹 표준으로, 요소에 대해 shadow tree 라는 별도의 캡슐화된 DOM 서브트리를 만들 수 있게 합니다. 서브트리의 마크업과 스타일은 메인 문서 DOM과 격리되어 의도치 않은 간섭을 방지합니다. 이는 Web Components의 기본 기술입니다.

캡슐화

내부 구조와 스타일은 메인 문서와 외부 CSS로부터 숨겨집니다.

범위 지정 스타일

Shadow tree 내부의 스타일은 해당 노드에만 적용되며, 페이지 스타일이 침투하지 못합니다.

Shadow Host

Shadow tree를 호스팅하는 일반 DOM 요소입니다.

Shadow Root

attachShadow()를 사용해 JavaScript로 생성되는 shadow tree의 루트 노드입니다.

const host = document.querySelector('#host');
const shadow = host.attachShadow({ mode: 'open' });

const span = document.createElement('span');
span.textContent = "I'm inside the shadow DOM!";
shadow.appendChild(span);

Shadow DOM이 없으면 외부 페이지 스타일이 컴포넌트 내부 스타일을 우연히 덮어쓸 수(그리고 그 반대도) 있어 대규모 앱 유지보수가 어려워집니다. Shadow DOM은 컴포넌트 주위에 “스타일 및 마크업 버블”을 만들어 주변 페이지와 무관하게 예측 가능한 동작을 보장합니다.

Shadow DOM 내부 스타일링

스타일이 shadow root 내부에 범위가 지정되므로, shadow‑DOM 요소는 shadow 트리 안에 배치된 일반 CSS로 내부에서 스타일링합니다.

shadow.innerHTML = `
  
    span {
      color: red;
      border: 1px solid black;
    }
  
  Shadow DOM content
`;

이 CSS는 오직 shadow 트리 내부의 요소에만 적용되어 외부 스타일과의 충돌을 방지합니다.

CSS 커스텀 섀도우 파트

Shadow DOM이 캡슐화를 제공하지만, 외부에서 내부 요소를 커스터마이징하는 것을 제한하기도 합니다. CSS 커스텀 섀도우 파트를 사용하면 웹 컴포넌트가 캡슐화를 깨지 않으면서 특정 내부 요소를 외부 스타일링에 노출할 수 있습니다.

/* External stylesheet */
my-component::part(button) {
  background-color: green;
  border-radius: 5px;
}

예제 컴포넌트

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).innerHTML = `
      
        button {
          background-color: blue;
          color: white;
          padding: 10px;
          border: none;
          cursor: pointer;
        }
      
      Press me
    `;
  }
}
customElements.define('my-button', MyButton);

외부 스타일링

my-button::part(button) {
  background-color: orange; /* Override internal button style */
}

외부 CSS는 내부 버튼의 part="button"을 대상으로 하며, 컴포넌트의 나머지 부분은 여전히 캡슐화된 상태를 유지합니다.

Key Features

결론

Shadow DOM과 CSS Custom Shadow Parts를 사용함으로써, 개발자는 캡슐화되고 사용자 정의 가능한 견고하고 유지 보수가 쉬운 웹 컴포넌트를 만들 수 있으며, 이는 재사용 가능한 UI 빌딩 블록의 새로운 시대를 열어줍니다.