Javascript 在聚合物中使用条件槽

我在polymer 3 es6中构建了一个材质设计卡元素，只希望在属性设置为true时有

标记。 这是我的js代码：

export class ACard extends PolymerElement {
  static get is() { return 'a-card' }
  static get template() { return `


<div class="card">
  <script>
      if ([[media]]) {
          <div class$="card-image">
            <slot name="image"></slot>
          </div>
      };
  </script>
  <div class="card-stacked">
    <div class="card-content">
      <slot name="title" class="card-title"></slot>
      <slot name="text"></slot>
    </div>
    <div class$="card-action">
      <slot name="action-link"></slot>
    </div>
  </div>
</div>`


  }
  constructor() {
    super();
  }
  static get properties() {
    return {
      media: {
        type: Boolean
      }
    }

  }
}

customElements.define(ACard.is, ACard)

导出类ACard扩展了相关{
静态get是（）{return'a-card'}
静态获取模板（）{return`
如果（[[媒体]]）{
};
`
}
构造函数（）{
超级（）；
}
静态获取属性（）{
返回{
媒体：{
类型：布尔型
}
}
}
}
customElements.define（ACard.is，ACard）

这是我的index.html：

<a-card media="true">
  <img slot="image" src="">
</a-card>

因此，当媒体属性设置为

true

card image div时，将返回其中的插槽。 我不得不道歉，因为我是javascript新手，示例中可能存在严重的语法和逻辑问题。

使用Dom if模板

<a-card media="true">
  <template is="dom-if" if="{{media}}">
    <img slot="image" src=""/>
  </template>
</a-card>

图像仅在以下情况下显示：

媒体=真