造型聚合物紙滑塊

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很新，所以這可能是一個非常簡單/愚蠢的問題，但我真的很困惑，非常感謝任何幫助！

次要（但相關）問題是當值為100時剪輯輸入到可編輯paper-slider元素的右側。

Answer 1

您可以使用像::shadow和/deep/這樣的選擇器，但不推薦使用它們。 如果一個元素沒有提供鈎子（CSS變量和mixins）那么你基本上沒有運氣。

你可以做的是在元素GitHub repo中創建一個功能請求，以支持其他選擇器。

我已成功使用的另一種解決方法是添加樣式模塊 。

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