[HTML] Shadow DOM

Shadow dom

말그대로 숨겨진 HTML 요소임

예를들어 <input type=”file”/> 를 사용하고 개발자 도구로 보면 button, span 태그가 두개 생길거임.

이게 shadow dom임.

apperance : none 속성은 기본 브라우저 css를 없애는것

Progressbar 수정 예시

수정 하기 전 기본 Progress bar

F12 클릭 후 Show user agent shadow DOM 을 클릭하면 shadow DOM 을 확인할 수 있다.

Shadow DOM 수정 코드

<progress value="0.5"></progress>
    <style>
      progress {
        appearance: none;
      }
      ::-webkit-progress-bar {
        background-color: orange;
      }
    </style>

수정 결과

바뀐 것을 확인 할 수 있다.