Styling polymer paper slider

Question

So, I essentially wrap the standard paper-slider element with a special element and want to include some style. Below is what I have:

 <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/

The definition of the variables that paper-slider uses works as expected, but when I try to access something inside it directly through its selector, it does not work.

I'm new to Polymer, so this may be a very simple / stupid question, but I am really very confused and really appreciate any help!

A secondary (but related) problem is clipping input to the right of the paper-slider edited when the value is 100.

Answer 1

You can use selectors like ::shadow and /deep/ , but they are deprecated. If the element does not provide hooks (CSS variables and mixins), then you are mostly out of luck.

What you can do is create a function request in GitHub elements to support additional selectors.

Another workaround that I have already successfully used is to add a style module.

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

I hope the syntax is correct. I use Polymer only with Dart. The dom module should be custom-style , although this is usually only necessary when used outside the Polymer element.

See also https://github.com/Polymer/polymer/issues/2681 about the problems that I encounter with this approach.

Answer 2

The following code works for me:

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