4

在 Rob Dodson 关于 Web 组件的一次演讲中，他提到了全新的“猫”^^和“帽子” ^CSS 选择器，我询问了将样式应用到自定义元素的 ShadowDOM 以及浏览器原生的可能性元素的 ShadowDOM？

是否可以对 ShadowDOM 中的元素进行样式设置？在哪些浏览器中以及如何使用？我发现的唯一相关文章是 Dimitry Glazkov 的“ Shadow DOM 到底是什么？-webkit-appearance: none;'，在那里他展示了通过使用伪选择器和规则进入 ShadowDOM 子树。

4

2 回答 2

2

由于CSS Scoping Module Level 1草案的状态可以随时更改，我最初的方法并没有奏效很长时间。

在Chrome v33+Enable Experimental Web Platform Features中，您必须chrome://flags启用以下代码才能正常工作。

从Chrome Canary v33及其猫选择器开始^^，答案是：是的！
2014-03-30 更新： Chrome Canary v35+支持最新版本的选择器，即现在所谓的/deep/选择器。

It styles over all boundaries and also works on native elements.

See: 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 ) );
}
于 2013-11-18T09:37:27.223 回答
1

至少在 Chrome 中是可能的。如果你检查 Shadow DOM，<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;
}
于 2013-11-18T09:20:49.530 回答