[23-07-27 TIL] shadow DOM을 사용한 CSS 오염 방지

1. 문제 상황

서버로부터 받아온 HTML string을 화면에 미리보기처럼 보여주려고 한다.
HTML string은 style 태그를 포함하고 있고 style 태그에서는 *, a 선택자를 사용해 스타일을 주고 있다.
그런데 이 코드가 다른 element에도 스타일을 적용시켜 기존 스타일이 오버라이딩됐다.

미리보기 영역에만 해당 스타일이 적용됐으면 좋겠다.

2. 시도

1. html string에서 *문자열을 찾아서 .class명 * 로 바꾼다.
   문제점: a태그나 다른 선택자들에 대해 css 오염을 막지못한다.
2. iframe사용한다 => 인터넷에서 사용 권장하지 않는다는 글을 보고 바로 다음 방법을 찾았다.

3. 해결

const shadow = ref.current.attachShadow({ mode: "open" }); // shadow DOM 사용
shadow.innerHTML = "YOUR_HTML_STRING";

shadow dom은 다른 바깥의 태그에 영향을 주지 않는다.

4. 참고

1. shadow DOM 사용하기

2. Techniques to prevent CSS override by base application