造型聚合物纸滑块

Question

所以我实际上是用自定义元素包装标准 paper-slider 元素，并希望包含一些样式。以下是我目前拥有的：

<dom-module id="my-slider">
<template>
    <style>
      /* Works */
      paper-slider {
        --paper-slider-active-color: red;
        --paper-slider-knob-color: red;
        --paper-slider-height: 3px;
      }

      /* Doesn't work */
      paper-slider #sliderContainer.paper-slider {
        margin-left: 0;
      }

      /* Also doesn't work */
      .slider-input {
        width: 100px;
      }
    </style>

    <div>
        <paper-slider editable$="[[editable]]" disabled$="[[disabled]]" value="{{value}}" min="{{min}}" max="{{max}}"></paper-slider>
    </div>
</template>

<script>
    Polymer({
        is: "my-slider",
        properties: {
            value: {
                type: Number,
                value: 0,
                reflectToAttribute: true
            },
            min: {
                type: Number,
                value: 0
            },
            max: {
                type: Number,
                value: 100
            },
            editable: Boolean,
            disabled: Boolean
        }
    });
</script>
</dom-module>

JSFiddle：https://jsfiddle.net/nhy7f8tt/

定义 paper-slider 使用的变量按预期工作，但是当我尝试通过其选择器直接处理其中的任何内容时，它不起作用。

我是 Polymer 的新手，所以这可能是一个非常 simple/stupid 的问题，但我真的很困惑，非常感谢任何帮助！

次要（但相关）的问题是当值为 100 时，可编辑 paper-slider 元素右侧的输入被剪裁。

Answer 1

您可以使用 ::shadow 和 /deep/ 这样的选择器，但它们已被弃用。如果一个元素不提供钩子（CSS 变量和混入）那么你基本上就不走运了。

您可以做的是在 elements GitHub 存储库中创建一个功能请求以支持其他选择器。

我已经成功使用的另一个解决方法是添加 style module。

var myDomModule = document.createElement('style', 'custom-style');
myDomModule.setAttribute('include', 'mySharedStyleModuleName');
Polymer.dom(sliderElem.root).appendChild(myDomModule);

希望语法正确。我只在 Dart 中使用 Polymer。 dom-module 需要是 custom-style，尽管这通常仅在 Polymer 元素外部使用时才需要。

另请参阅 https://github.com/Polymer/polymer/issues/2681 关于我运行使用此方法遇到的问题。

Answer 2

下面的代码对我有用，

attached: function(){
  var sliderContainer = document.querySelector("#sliderContainer.editable.paper-slider");
  sliderContainer.style.marginTop = "5px"; 
  sliderContainer.style.marginBottom = "5px";
},

造型聚合物纸滑块

Styling Polymer paper-slider

javascript

css

web-component

polymer

paper-elements