首页 文章

将样式应用于浏览器自己的元素，还是原生的ShadowDOM？

提问于
浏览 次
4

在Rob Dodson谈到Web Components之后，他在那里提到了全新的"cat" ^^ 和"hat" ^ CSS选择器，我还是给了浏览器've asked about the possibilities of applying styles not only to a custom element' ShadowDOM？

是否可以设置ShadowDOM中的元素样式？在哪些浏览器中如何？唯一相关的文章我在这里通过使用伪选择器和 -webkit-appearance: none; 规则来扩展到ShadowDOM子树 .

css browser css-selectors web-component shadow-dom

2 回答

  • 1

    由于CSS Scoping Module Level 1草案的状态随时可以改变，我原来的方法工作时间不长 .

    在Chrome v33中，您必须在 chrome://flags 中打开 Enable Experimental Web Platform Features 才能使下面的代码生效 .

    从Chrome Canary v33及其猫选择器 ^^ 开始，答案是： Yes!
    Update 2014-03-30: Chrome Canary v35支持最新版本的选择器，现在称为/deep/ selector .

    它适用于所有边界，也适用于原生元素 .

    见：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 ) );
}
    回复于
  • 2

    有可能，至少在Chrome中 . 如果你检查 <input type="date"> 的Shadow 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;
}

    According to Rob Dodson himself可以使用 ^ 和 ^^ 选择器来设置本机Shadow DOM的样式 . 所以这个规则应该有效（Chrome Canary，我相信）：

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

相关问题