shadow DOM으로 신규 프로젝트의 스타일을 지키는 방법

기존 서비스에 Bulma와 태그 선택자 기반의 전역 스타일이 남아 있어, 새 앱의 요소가 어떤 영향을 받을지 예측하기 어렵고 스타일이 충돌했습니다.

새 앱을 Shadow DOM 안에 넣어 외부 스타일과 분리하고, Emotion이 만든 스타일 태그와 모달·툴팁 같은 Portal 요소도 Shadow DOM 내부를 대상으로 지정해 앱의 스타일과 동작이 정상적으로 적용되게 했습니다.

!important나 복잡한 SCSS 예외 처리는 유지보수가 어렵거나 필요한 설정을 사용할 수 없는 문제가 있으므로, 기존 코드와 새 코드를 함께 운영할 때는 스타일뿐 아니라 동적으로 생성되는 요소의 위치까지 격리해야 합니다.