Polymer项目：paper-card内#shadow-root下的图片样式不生效

嘿，我之前也踩过这个坑！Polymer 2.0的Shadow DOM样式隔离确实有点磨人，尤其是要修改子元素内部的样式时。你之前尝试的旧方法（比如::shadow或者/deep/）在Polymer 2.x里已经被废弃了，所以没法生效，得用符合新版规范的方式来处理：

方法1：利用iron-image暴露的CSS自定义属性 #

Polymer官方元素（比如iron-image）通常会提供自定义CSS属性/混合，方便你修改内部元素的样式。对于iron-image里的<img>，可以用--iron-image-image这个样式混合来设置：

在你的自定义元素的<template>内的<style>标签中添加：

iron-image {
  --iron-image-image: {
    border-radius: 8px;
    max-width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* 这里放你需要的样式 */
  };
}

这个混合会直接应用到iron-image内部shadow root里的<img>元素上，完全符合Polymer 2.x的规范。

方法2：自定义扩展iron-image元素 #

如果--iron-image-image满足不了你的需求，你可以自己扩展iron-image，在它的shadow DOM里直接写样式：

class CustomIronImage extends Polymer.Element {
  static get is() { return 'custom-iron-image'; }
  static get properties() {
    return {
      src: String,
      hidden: Boolean
    };
  }
  static get template() {
    return Polymer.html`
      <style>
        /* 这里直接控制内部的img，因为在同一个shadow root里 */
        #img {
          border: 2px solid #2196F3;
          object-fit: cover;
          width: 100%;
          height: 200px;
        }
      </style>
      <iron-image id="image" hidden$="[[hidden]]" src="[[src]]"></iron-image>
    `;
  }
}
customElements.define(CustomIronImage.is, CustomIronImage);

然后在你的paper-card里替换成这个自定义元素：

<paper-card elevation="1" aria-label="">
  <custom-iron-image src="/images/image.jpg"></custom-iron-image>
  <div class="card-content">
    <h2>Title</h2>
    Some text here..
  </div>
</paper-card>

关键注意事项 #

• 别再用::shadow或/deep/了！这些语法在Polymer 2.x里已经被移除，属于废弃写法，完全不会生效。
• 所有样式必须写在自定义元素的<template>内部的<style>里，全局样式无法穿透Shadow DOM。

内容的提问来源于stack exchange，提问作者vishnu