我有以下情况。我创建了一个对话框元素，如以下片段所示：
<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>
现在，我想在核心叠加层中设置#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;
}
但这是行不通的，因为我的对话不是影子领域的祖先。 （最高的祖先是核心覆盖层）
我可以使用paper-action-dialog上的id（在影子dom树中）更具体：
html /deep/ #myDialog /deep/ #scroller {...}
但是，这将选择所有出现的“我的对话”
所以我的问题是如何有选择地设置#scroller的样式，以便我可以使用pickMe类在我的对话框中选择一个？
最佳答案
好，
这是情况。由于当前实施的纸动作对话是纸对话基础的扩展，其又扩展了核心覆盖。如果将paper-action-dialog包装在您自己的自定义元素中，则核心叠加层在标签上向下构建阴影的方式将永远不会出现在shadow dom中，并且不能用于为随附的paper-action-dialog专门设计样式。
我想出了两种解决方案。第一个是保留封闭纸动作对话框的策略，但要传递一些可以用来设置纸动作对话框样式的东西。以下作品：
<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>
然后，您可以使用以下方式有选择地设置my-dialog实例的样式：
html /deep/ .pickMe /deep/ #scroller {}
因为paper-action-dialog会在pickdom类的影子dom中。
第二种方法是将my-dialog实施为对paper-dialog-base的扩展。您可以只修改paper-action-dialog，将其另存为my-dialog，并包含您喜欢的任何内容和样式。然后，我的对话将进入阴影dom，您可以使用类似
my-dialog.pickMe /deep/ #scroller {}
paper-action-dialog是对paper-dialog-base的非常简单的扩展，因此应该易于维护。
我更喜欢第二种方法。
关于css - Polymer如何选择性地设置#scroller的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27583920/