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

Posted 2021-04-12

我正在研究Polymer 2.0，并使用聚合物paper-card来显示一些文字和图像。我需要将样式应用于<iron-image>#shadow-root下的图像

代码如下：

<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>

尝试过来的css规则：https://stackoverflow.com/a/32025876/6191987

paper-card iron-image::shadow #shadow img {
   display: block;      
}

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

答案

试试paper-card ::slotted(iron-image)。看看有关造型分布式儿童的链接here。

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

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