Shadow DOM이란?Shadow DOM은 독립적인 DOM 트리를 생성할 수 있게 해주는 웹 표준이자, 웹 컴포넌트의 핵심적인 기술 중 하나이다. 캡슐화를 통해 마크업 구조, 스타일, 로직을 숨기고 페이지 내 다른 코드로부터 분리되어 코드 충돌이 없게 만들어준다. input[type=text] 요소를 예시로 들어 보자. 좌측 코드처럼 input 태그의 placeholder 가상 요소에 color 스타일을 주면 placeholder의 글자 색을 바꿀 수 있다. 화면에 렌더링된 input 태그를 확인해 봐도 글자 색이 보라색으로 잘 변경이 된 것을 확인할 수 있지만, 개발자 탭에서는 placeholder 요소에 적용한 스타일이 보이지 않는다. 이유는 바로 input 태그 안에 있는 placeholder..
