将样式应用于浏览器自己的元素，本机ShadowDOM？

Question

在Rob Dodson关于Web组件的演讲之后，他提到了全新的"猫" ^^ 和"帽子" ^ CSS选择器，我问过将样式不仅应用于自定义元素的阴影域，还应用于浏览器的本机元素的阴影域的可能性？

是否有可能从ShadowDOM样式元素？在哪些浏览器和如何？我发现的唯一相关的文章是由Dimitry Glazkov在'Shadow DOM到底是什么？在那里，他通过使用伪选择器和 -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

这是可能的，至少在Chrome中。如果你检查Shadow DOM of <input type="date"> 你会看到:

<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本人的说法 有可能使用 ^ 和 ^^ 选择器来设置原生Shadow DOM的样式。所以这个规则应该工作（Chrome Canary，我相信）:

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