如何根据 lit-element 中的属性添加 class？

Question

如何使用 web 组件属性添加条件 class ？ 所以假设我有一个图像组件，它获取属性全屏然后我想将 class 全屏添加到我的组件（使用发光元素）；

我现在拥有的（不工作）

export class Image extends LitElement{
static get styles() {
    return css `
  :host {
    display: block;
    height: 100%;
  }

  picture {
      display: block;
  }

  .fullscreen img {
      position: absolute;
      object-fit: cover;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
      z-index: -2;
  }
`;
}

static get properties() {
    return {
        fullScreen: {
            type: Boolean
        },
        imageSrc: {
            type: String
        }
    };
}

constructor() {
    super();
    this.fullScreenClass = {
        fullscreen: this.fullScreen
    }
    this.imageSrc = "";
}

render() {
    return html `
    <picture class=${classMap(this.fullScreenClass)}>
    <source
    srcset="${this.imageSrc}">
  <img scr="${this.imageSrc}">
    </picture>
`;
}

}

我想如何使用它

<test-image fullscreen
  imageSrc="https://www.driving.co.uk/s3/st-driving-prod/uploads/2019/05/Aston-Martin-Rapide-E-Charging-01.jpg">
</test-image>

Answer 1

您可以使用属性 css 选择器

:host([fullscreen]) {
    // your styling for fullscreen
  }

由于fullscreen属性，此样式将应用于 HTML 中的以下组件实例

<test-image fullscreen
  imageSrc="https://www.driving.co.uk/s3/st-driving-prod/uploads/2019/05/Aston-Martin-Rapide-E-Charging-01.jpg">
</test-image>