造型聚合物纸滑块 [英] Styling Polymer paper-slider

问题描述

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

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:

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

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

定义纸张滑块使用的变量正如预期的，但是当我尝试通过其选择器直接通过其选择器来解决任何内容，它不工作。

Defining the variables that the paper-slider uses works as expected, but when I try to address anything inside of it directly via its selector, it doesn't work.

我对Polymer很新，所以这可能是一个非常简单/愚蠢的问题，但我真的很困惑，并非常感谢任何帮助！

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

次要（但相关）问题是剪辑的输入

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

推荐答案

您可以使用 :: shadow 和 / deep / 等选择器，但不推荐使用。如果一个元素不提供钩子（CSS变量和混合），那么你基本上没有运气。

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.

你可以做什么，是创建一个特征请求在元素GitHub 资源库中支持其他选择器。

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);

我希望语法正确。我用聚合物和Dart。
dom-module需要是自定义样式，即使这通常只在Polymer元素之外使用才是必需的。

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.

另请参见 https://github.com/Polymer/polymer/issues/ 2681 关于我使用这种方法遇到的问题。

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

这篇关于造型聚合物纸滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！