딥다크한 어둠의 공간 Shadow DOM 강좌 문의

안녕하세요 선생님

Shadow Dom 

ㄷㅜ번째 예제에서

  progress::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 2px;
  }
  progress::-webkit-progress-value {
    background-color: red;
    border-radius: 2px;
  }

이 두가지 CSS만 쓰면, 스타일 적용이 안되더라구요

progress {
    /*기본 배경은 없애주는게 좋습니다*/
    -webkit-appearance: none;
    -moz-appearance : none;
    appearance: none;
    background: white;
  /* IE10 호환성용 */
    color: red;
  }

이거까지 써야 스타일링이 되던데, 어떤 이유 인가요?

참고로, 크롬 최신버전 이용 중입니다.

그리고 애초에, progress tag는 background 색이 default 값으로 green, gray색으로 되어 있던데

웹에는 해당색이 아닌 다른색으로 구현이 되고있던데.. 무슨 문제 인지 모르겠네요