css - 如何自定义预定义元素

Question

我想改变 polymer 的颜色值 paper-input .

我读了guide ，但这对我来说没有意义。 我从未使用过 CSS 变量，但根据 Mozilla CSS specs 应该这样做

// For shadow DOM
body /deep/ .gold-cc-cvc-input::shadow {
    --paper-input-container-focus-color: $color;
    --paper-input-container-color: $color;
    --paper-input-container-invalid-color: $color;
    --paper-input-container-input-color: $color;

    text-align: left;
    margin: auto;
}

我尝试执行 CSS 变量，但样式不适用。

我在这里兜圈子，如果有 polymer 经验的人能帮助我，那就太棒了。

Answer 1

好吧，这里唯一缺少的是您的样式需要 is="custom-style" 属性。

  <style is="custom-style">..</style>

还有 body/deep/.gold-cc-cvc-input::shadow 出于某种原因不起作用，我最终使用了 :root .gold-cc-cvc-输入代替。

最终代码:

:root .forms-input  {
    --paper-input-container-focus-color: $color;
    --paper-input-container-color: $color;
    --paper-input-container-invalid-color: $color;
    --paper-input-container-input-color: $color;
}

如果 Polymer 团队的某个人读到: PS:您的文档需要完整的代码示例，很难猜测那里的任何内容。更少的文字更多的代码!