Так что я по сути оборачиваюсь стандартом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, так что это может быть очень простой / глупый вопрос, но я очень смущен и очень признателен за любую помощь!

Вторичной (но связанной) проблемой является отсечение ввода справа от редактируемогоpaper-slider элемент, когда значение равно 100.