딥다크한 어둠의 공간 Shadow DOM

Shadow dom : HTML 태그 뒤에 숨겨진 태그들

예를들어 <input type=’file’> 태그를 사용하면 다음과 같이 버튼과 텍스트가 표시된다

• 태그는 하나를 사용하지만 개발자 도구를 사용하면 input 태그 밑에 <button> 태그와 <span> 태그가 숨겨져 있는것을 확인할 수 있다.
• 이 숨겨진 태그들을 Shadow dom 이라고 한다.
• Shadow DOM은 스타일이 구성 요소에서 누출되어 의도하지 않게 다른 엘리먼트에 적용 되는 것을 방지하는데 매우 유용하다.

input의 placehoder 속성도 쉐도우 dom 태그가 2개가 생성된다.

• Shadow dom 의 일부분만 스타일링 하고싶을때는 :: 를 사용해서 스타일링 해야된다.

:: psudo-elemen

:: 의 의미