브라우저 자체 요소, 기본 ShadowDOM에 스타일을 적용하시겠습니까?

Question

Web Components에 대한 Rob Dodson의 강연 후 그는 새로운 "cat"에 대해 언급했습니다. ^^ 그리고 "모자" ^ CSS 선택기, 사용자 정의 요소의 ShadowDOM뿐만 아니라 브라우저의 기본 요소의 ShadowDOM에도 스타일을 적용할 수 있는 가능성에 대해 질문했습니다.

ShadowDOM에서 요소의 스타일을 지정할 수 있습니까?어떤 브라우저에서 어떻게?내가 찾은 유일한 관련 기사는 Dimitry Glazkov가 쓴 'Shadow DOM이 도대체 무엇인가요?' 여기서 그는 의사 선택기를 사용하여 ShadowDOM 하위 트리에 접근하는 방법을 설명하고 -webkit-appearance: none; 규칙.

Answer 1

초안 상태로 인해 CSS 범위 지정 모듈 레벨 1 언제든지 바뀔 수 있다는 점 때문에 나의 원래 접근 방식은 그리 오래 작동하지 않았습니다.

~ 안에 크롬 v33+ 너는 돌아서야 할 거야 Enable Experimental Web Platform Features ~에 chrome://flags 아래 코드가 작동하려면 켜세요.

---

로 시작 크롬 카나리아 v33 그리고 고양이 선택기 ^^ 정답은: 예!
2014-03-30 업데이트: 크롬 카나리아 v35+ 이제 소위 말하는 최신 버전의 선택기를 지원합니다. /deep/ 선택자.

모든 경계에 걸쳐 스타일을 적용하고 기본 요소에서도 작동합니다.

보다: http://codepen.io/Volker_E/pen/jsHFC

/* ... Example for applying to all h2 elements, no matter if DOM or any ShadowDOM subtree ... */
:root ^^ h2 {
    font-family: "Arial Black", sans-serif;
}

/* Cr 33+: The "cat" also works on native elements' ShadowDOM */
video ^^ input[type="button"]:first-child {
    opacity: .75;
    -webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}

/* Cr 35+: /deep/ also works on native elements' ShadowDOM */
video /deep/ input[type="button"]:first-child {
    opacity: .75;
    -webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}

Answer 2

적어도 크롬에서 가능합니다.섀도우 DOM을 확인하면 <input type="date">의 DOM을 확인하십시오.

<input type="date">
  #document-fragment
    <div part="-webkit-datetime-edit" id="date-time-edit">
      <div part="-webkit-datetime-edit-fields-wrapper">
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="12" aria-help="Month" part="-webkit-datetime-edit-month-field">mm</span>
        <div part="-webkit-datetime-edit-text">/</div>
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="31" aria-help="Day" part="-webkit-datetime-edit-day-field">dd</span>
        <div part="-webkit-datetime-edit-text">/</div>
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="275760" aria-help="Year" part="-webkit-datetime-edit-year-field">yyyy</span>
      </div>
    </div>
</input>

.

스타일 별도 의사 요소를 구성 할 수 있습니다.

::-webkit-datetime-edit-year-field {
  font-weight: bold;
}

.

Rob Dodson 자신에 따르면 ^ 및 ^^ 선택기를 사용하여 기본 섀도우 DOM을 스타일로 사용할 수 있습니다.따라서이 규칙은 일해야합니다 (크롬 카나리아, 나는 믿습니다) :

input[type="date"] ^ [part="-webkit-datetime-edit-year-field"] {
  font-weight: bold;
}

.