웹 위젯과 Shadow DOM 이해하기

웹 위젯은 독립적인 UI 컴포넌트로, 외부 사이트에 쉽게 삽입할 수 있는 형태를 말한다. 마치 YouTube 영상을 embed하듯이, 간단한 태그 하나로 복잡한 기능을 추가할 수 있다. 

  <div>
    <americanopeople-widget data='{"name":"최커피"}'></americanopeople-widget>
  </div>

요런 태그로 컴포넌트를 쉽게 삽입할 수 있다.

 

코드 살펴보기 

1. 커스텀 엘리먼트 정의

class AmericanopeopleWidget extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); // Shadow DOM 생성
  }
}

Shadow DOM은 DOM 트리 안에 숨겨진 또 다른 DOM 트리를 만드는 기술이다. 웹 위젯에서는 다음과 같은 문제를 해결하기 위해 Shadow DOM을 사용한다. 

• 스타일 격리: 위젯 내부 CSS가 외부에 영향 안줌
• DOM 격리: 외부 스크립트가 내부 DOM 직접 접근 못함
• 재사용성: 어떤 페이지에 넣어도 동일하게 작동

 

2. 동적 데이터 주입

<americanopeople-widget data='{"name":"최커피"}'></americanopeople-widget>

• data 속성에 JSON 문자열 전달할 수 있다. 
• setAttribute로 실시간 업데이트가 가능하다. 

 

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM