[JavaScript] Shadow DOM이란 뭘까?

오늘 제가 소개할 것은 Shadow DOM인데 어쩌다 Shadow DOM을 소개하게 되었냐면 

공부할 것을 찾으면서 FrontEnd 로드맵을 보다가 잘 모르는 Shadow DOM이라는 것이 있길래 찾아보게 되었습니다

Shadow DOM 발견~!

---

❓ Shadow DOM이란?

 

Shadow DOM은 웹 컴포넌트(Web Components)의 핵심 기술 중 하나로 DOM 요소에 캡슐화된 DOM 트리를 제공하여 외부의 CSS나 JavaScript의 영향을 받지 않도록 하는 기능입니다

웹 컴포넌트
spa 프레임워크에서 제공하는 html코드 조각들을 컴포넌트화 하여 관리하는 것과 같은 기술들을 칭합니다

캡슐화
Shadow DOM에서의 캡슐화는 DOM 트리, 스타일, 그리고 동작을 외부로부터 격리시켜, 컴포넌트의 내부 상태를 보호하는 것을 뜻합니다

 

다른 트리와 격리되어 있어서 서로 영향을 주지 않습니다

Shadow DOM은 Shadow Root라는 루트 요소를 통해 생성됩니다

 

Shadow DOM은 Firefox (63 이상), Chrome, Opera, Safari에서 기본으로 지원합니다

새로운 Chromium 기반의 Edge (79 이상) 또한 Shadow DOM을 지원하나 
구버전 Edge를 포함한 IE에서는 지원되지 않습니니다

 

이럴 때 사용하면 좋습니다

• 스타일과 동작을 캡슐화하여 다른 코드와 충돌 없이 재사용 가능한 컴포넌트를 만들 때
• Shadow DOM 내부의 스타일은 외부와 독립적이게 다른 CSS와 충돌하지 않아야 할 때
• 모듈화된 구조로 관리가 쉽고 확장 가능한 UI를 구현할 때

---

Shadow DOM 구성 요소

• Host: Shadow dom을 포함하는 요소
• Shadow root: Shadow DOM의 루트이고 attachShadow() 메서드를 이용하여서 생성
• Shadow Boundary: Shadow DOM과 기존 DOM 사이의 경계
• Shadow Tree: Shadow DOM 내부의 DOM Tree 입니다

 

Shadow DOM 구성 요소

---

🎯 사용 예시

<div>
  <span>일반 DOM</span>
</div>

<div id="shadow-host"></div>

<style>
  span {
    background-color: tomato;
    color: white;
    padding: 10px;
    border-radius: 5px;
  }
</style>

<script>
  const shadowHost = document.querySelector("#shadow-host");
  const shadowRoot = shadowHost.attachShadow({ mode: "open" }); // Shadow DOM 생성 js로 접근 가능하게

  const shadowStyle = document.createElement("style");
  shadowStyle.textContent = `
    span {
      background-color: green;
      color: black;
      padding: 15px;
      border-radius: 10px;
    }
  `;

  const shadowSpan = document.createElement("span");
  shadowSpan.textContent = "Shadow DOM";

  shadowRoot.appendChild(shadowStyle);
  shadowRoot.appendChild(shadowSpan);
</script>

일반 DOM은 일반 DOM이라는 문구와 함께 토마토색으로 스타일링

#host에 생성한 Shadow DOM은 Shadow DOM라는 문구와 함께 초록색으로 스타일링

Shadow DOM 내부의 스타일과 콘텐츠는 외부 Light DOM과 독립적으로 작동합니다

이 방식을 통해 웹 컴포넌트의 캡슐화된 스타일을 구현할 수 있습니다

---

✨ 마무리

이렇게 Shadow DOM에 대해서 알아봤는데 꽤 몰랐던 개념을 알게 되었고 예상한 것과 달라 꽤 흥미로웠던거 같습니다

하지만 현재는 여러 프레임워크들에는 Shadow DOM을 대신할 만한 것들이 충분히 잘 되어 있기 때문에 잘 사용되지 않는다고 합니다