我使用的是 Polymer 2.0。我需要为 Shadow DOM 下的类应用样式。
如果是这样的话(iron-dropdown
在shadow-root下):
<paper-menu-button>
#shadow-root
<iron-dropdown></iron-dropdown>
</paper-menu-button>
iron-dropdown
的样式我们可以这样写:
paper-menu-button {
--iron-dropdown: {
overflow:visible;
}
}
但是,在这种情况下:
<paper-menu-button>
#shadow-root
<iron-dropdown>
<div class="dropdown-content"> content </div>
</iron-dropdown>
</paper-menu-button>
我们如何为类应用样式 .dropdown-content
最佳答案
<paper-menu-button>
允许样式内部 <iron-dropdown>
和 .dropdown-content
具有 CSS 属性(即分别为 --paper-menu-button-content
和 --paper-menu-button-dropdown
):
<dom-module id="x-foo">
<template>
<style>
paper-menu-button {
/* applies to inner iron-dropdown */
--paper-menu-button-dropdown: {
overflow: visible;
};
/* applies to inner .dropdown-content */
--paper-menu-button-content: {
box-shadow: 5px 10px 20px lightblue;
overflow: visible;
};
}
</style>
<paper-menu-button>
...
<paper-menu-button>
docs on styling可能会列出您可能会觉得有用的其他 CSS 属性。
关于html - Polymer:将样式应用于 Shadow DOM 下的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48021150/