Polymer-project：＃shadow-root下的纸卡图像样式不起作用

Question

我正在使用Polymer 2.0，并使用聚合物 export namespace TimerFunctions { let session_timer; export function createTimer(duration, display, func) { Date.now = Date.now || (() => +new Date()); const start = Date.now(); let diff = 0; let minutes = 0; let seconds = 0; const timer = function() { diff = duration - (((Date.now() - start) / 1000) | 0); let minutes: any = (diff / 60) | 0; let seconds: any = (diff % 60) | 0; if (minutes < 0) { minutes = "0"; } if (seconds < 0) { seconds = "0"; } minutes = minutes < 10 ? `0${minutes}` : minutes; seconds = seconds < 10 ? `0${seconds}` : seconds; display.html(`${minutes}:${seconds}`); if (diff <= 0) { clearInterval(session_timer); return func(); } }; timer(); return (session_timer = setInterval(timer, 1000)); } }; export default TimerFunctions; 来显示一些文本和图像。我需要将样式应用于paper-card

下的图像

以下代码：

<iron-image>#shadow-root

从https://stackoverflow.com/a/32025876/6191987

尝试了css规则

<paper-card elevation="1" aria-label="">

<iron-image>
#shadow-root
<img id="img" hidden="" src="/images/image.jpg">
</iron-image>

<div class="card-content">
<h2>Title</h2>
Some text here..
</div>
</paper-card>

但它不适合我。这包含什么错误吗？

Answer 1

试试paper-card ::slotted(iron-image)。查看关于样式分发子项的链接here。

您也可以在css中尝试--paper-card-header-image，例如：

paper-card {
    --paper-card-header-image: {
        display: block;
    };
}