polymer ，如何在纸对话框可滚动上调整内部 div 的填充

Question

paper-dialog-scrollable 的内容区域左右各有 24px 的内边距。我想改变这一点。呈现 HTML 时，它是一个内联样式表和一个具有填充的内联 div。我试过使用以下无济于事。 polymer 内联样式在我的内联样式之后出现。

不起作用:

<style>
  .scrollable {
    --paper-dialog-scrollable: {
        padding-left: 0px;
        padding-right: 0px;
    };
  }
</style>

在下图中我需要更改的是 id="scrollable"的 div。我认为实际上设置填充的是 scope=paper-dialog-scrollable-0。

那么如何在 paper-dialog-scrollable 上调整内部 div 的填充？

Answer 1

您可以使用像 ::shadow 和 /deep/ 这样的选择器，但它们已被弃用。如果一个元素不提供钩子(Hook)(CSS 变量和混合)，那么你基本上就不走运了，.scrollable 没有这样的钩子(Hook)。

您可以做的是在 elements GitHub 中创建一个功能请求repo 以通过 mixin 支持额外的选择器。

我已经成功使用的另一个解决方法是添加一个 style module .

像这样创建一个样式模块

<dom-module id="scrollable-customization">
 <style>
  .scrollable {
    --paper-dialog-scrollable: {
      padding-left: 0px;
      padding-right: 0px;
    };
  </style>
</dom-module>

导入它然后将它“注入(inject)”到可滚动元素

var myDomModule = document.createElement('style', 'custom-style');
myDomModule.setAttribute('include', 'scrollable-customization');
Polymer.dom(this.$pdscroll.root).appendChild(myDomModule);

我希望语法是正确的。我只在 Dart 中使用 Polymer。 dom 模块需要是 自定义样式，尽管这通常仅在 Polymer 元素外部使用时才需要。

另见 Styling Polymer paper-slider