Shadow DOM으로 스타일 충돌을 해결하는 방법

Bulma 기반 기존 서비스와 React 기반 신규 웹앱 간의 스타일 충돌 발생

Shadow DOM을 활용하여 스타일 격리 및 스타일 충돌 문제 해결 시도

Emotion cache 및 React Portal 설정을 통해 스타일 적용 및 레이아웃 문제 해결

Shadow DOM의 기본 원리

Shadow DOM은 웹 컴포넌트의 핵심 기술로, DOM 트리를 캡슐화하여 스타일과 마크업을 격리한다. 구체적으로 Shadow host에 Shadow tree를 부착하여 외부 스타일의 간섭을 막는다. 따라서 스타일 충돌 방지 및 컴포넌트 재사용성을 높인다.

Emotion Cache를 이용한 스타일 적용

React 앱에서 Emotion 스타일을 Shadow DOM에 적용하기 위해 emotion cache를 활용한다. 구체적으로, createCache 함수로 캐시 인스턴스를 생성하고, StyleProvider를 통해 스타일을 주입한다. 따라서 스타일 태그 이동을 통해 Shadow DOM 내부에서 스타일을 적용한다.

React Portal 타겟 설정

React Portal을 사용하는 컴포넌트의 경우, Shadow DOM 내부에 렌더링되도록 타겟을 설정해야 한다. 구체적으로, ThemeProvider를 사용하여 portal의 타겟을 Shadow DOM으로 지정한다. 결과적으로 레이아웃 문제를 해결하고, 스타일이 정상적으로 적용되도록 한다.