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

【问题标题】：Apply pseudo-element CSS selector inside shadow DOM在 shadow DOM 中应用伪元素 CSS 选择器
【发布时间】：2017-12-10 11:06:21
【问题描述】：

我有一个保存日期的 Polymer 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 中的伪元素？

【问题讨论】：

【解决方案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;
    }
}

【讨论】：