Question

我有以下情况。我创建了一个对话框元素，如此片段所示：

<polymer-element name="my-dialog">
    <template>
        <paper-action-dialog id='myDialog'>
            ... my content ...
        <paper-button raised dismissive>Done</paper-button>
      </paper-action-dialog>
    </template>
</polymer-element>

在我的主页面中，我包含了元素（我没有显示触发事件）

<my-dialog class='pickMe'>
</my-dialog>

我现在想要在core-overlay中设置#scroller的样式，然后由paper-action-dialog使用。以下内容将起作用，但将为所有核心覆盖设置样式：

html /deep/ #dialog::shadow #scroller {
  width: 500px;
  height: 300px;
  overflow:visible;
}

我希望更具体，因为我可能在页面上包含其他对话框。我想做类似的事情：

.pickMe /deep/ #dialog::shadow #scroller {
  width: 500px;
  height: 300px;
  overflow:visible;
}

但这不会起作用，因为我的对话不是影子dom中的祖先。（最高的祖先是核心覆盖层）

我可以使用纸张动作对话框（在阴影dom树中）上的id更具体：

html /deep/ #myDialog /deep/ #scroller {...}

但是，这将选择所有出现的对话框

所以我的问题是如何有选择地设置#scroller的样式，所以我只用pickMe类在my-dialog中选择一个？

Answer 1

确定，

这是情况。由于目前实施的纸张对话基础是纸张对话基础的扩展，反过来又扩展了核心覆盖。如果您在自己的自定义元素中包装paper-action-dialog，那么核心叠加层将阴影向下构建的方式将永远不会出现在阴影dom中，并且它不能用于专门设置封闭的纸张操作对话框的样式。

我想出了两个解决方案。第一个是保持封闭纸张动作对话的策略，但传递一些可以用来设置纸张动作对话的样式。以下作品：

<polymer-element name="my-dialog" attributes='myHandle>
    <template>
        <paper-action-dialog id='myDialog' class="{{myHandle}}">
            ... my content ...
        <paper-button raised dismissive>Done</paper-button>
      </paper-action-dialog>
    </template>
</polymer-element>

如果你使用这个元素：

<my-dialog myHandle='pickMe'>
</my-dialog>

然后，您可以选择使用以下方式设置对话框实例的样式：

html /deep/ .pickMe /deep/ #scroller {}

因为纸张动作对话框将与类pickMe一起出现在阴影中。

第二种方法是将my-dialog实现为paper-dialog-base的扩展。您可以只修改纸张动作对话框，将其另存为我的对话框，并包含您喜欢的任何内容和样式。我的对话框将在阴影dom中，您可以使用类似

之类的东西轻松地设置它

my-dialog.pickMe /deep/ #scroller {}

paper-action-dialog是纸质对话框的一个非常简单的扩展，因此应该易于维护。

我更喜欢第二种方法。

Polymer如何选择性地设置#scroller的样式

1 个答案: