Styling Polymer paper-slider

Question

So I\'m essentially wrapping the standard paper-slider element with a custom element, and wanting to include some styling. Below is what I currently have:

Answer 1

The following code is working for me,

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

Answer 2

You could use selectors like ::shadow and /deep/ but they are deprecated. If an element doesn't provide the hooks (CSS variables and mixins) then you're basically out of luck.

What you can do, is to create a feature request in the elements GitHub repo to support additional selectors.

Another workaround I already used successfully 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 needs to be a custom-style even though this is normally only necessary when used outside a Polymer element.

See also https://github.com/Polymer/polymer/issues/2681 about issues I run into with this approach.