在shadow DOM中应用伪元素CSS选择器

Question

我有一个聚合物2 paper-input，它有一个日期：

<paper-input type="date"></paper-input>

当这呈现时，实际的<input>位于控件的阴影DOM内。

我想使用伪元素选择器::-webkit-inner-spin-button来设置Chrome中微调器按钮的样式。

在Polymer 1 / Shadow DOM v0中，我可以使用/deep/或::shadow为这些构建样式规则，但在Polymer 2 / Shadow DOM v1中已弃用这些规则。

如何将样式应用于<paper-input>影子DOM中的伪元素？

Answer 1

您可以使用--paper-input-container-input-webkit-spinner自定义css mixin have a look at this。

例如，隐藏微调器：

paper-input[type=date] {
    --paper-input-container-input-webkit-spinner: {
        -webkit-appearance: none;
    }
}