피드로 돌아가기
Dev.toFrontend
원문 읽기
Shadow DOM과 Preact 기반의 40KB 초경량 독립 위젯 설계
Shadow DOM CSS Isolation: How to Embed a Widget Without Breaking the Host Page
AI 요약
Context
수천 개의 서로 다른 호스트 페이지에 삽입되는 위젯 특성상 호스트 CSS와의 충돌 및 스타일 오염 방지가 필수적인 상황. 기존 DOM 삽입 방식은 호스트의 CSS Reset이나 전역 스타일 규칙으로 인해 UI가 파괴되는 제약 존재.
Technical Solution
- Shadow DOM 도입을 통한 강력한 스타일 캡슐화 경계 구축 및 호스트 스타일 침투 차단
- :host { all: initial; } 설정을 통한 상속 CSS 속성 초기화로 완전한 스타일 독립성 확보
- 런타임 오버헤드 최소화를 위해 React 대신 3KB(gzipped) 규모의 Preact 채택
- 스타일 시트 외부 링크 불가 제약을 해결하기 위해 CSS 문자열을 태그로 직접 주입
- document.body 직속 부착과 position: fixed 설정을 통한 Root Stacking Context 확보로 z-index 충돌 최소화
- Shadow Root 내부 포커스 추적을 위한 shadowRoot.activeElement 기반의 Focus Trap 로직 구현
실천 포인트
- 호스트 CSS 상속 차단을 위해 :host { all: initial; } 적용 여부 확인 - 외부 스크립트 주입 시 사용자 경험 저해를 막기 위한 라이브러리 크기 최적화 및 Lazy-loading 전략 수립 - Shadow DOM 내 포커스 관리를 위해 document.activeElement 대신 shadowRoot.activeElement 사용 - 폰트 로딩 시 Shadow Root 외부인 document.head에 <link> 태그를 주입하여 가용성 확보