在阴影 DOM 内应用伪元素 CSS 选择器

Question

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

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;
    }
}

Apply pseudo-element CSS selector inside shadow DOM