Lit-element 不应用类静态获取样式答案

【问题标题】：Lit-element not applying classes static get stylesLit-element 不应用类静态获取样式
【发布时间】：2020-01-30 10:08:59
【问题描述】：

我正在制作一个简单的组件来测试最新的 Lit-element 一个 checkbox。在测试静态获取样式时，仅显示我设置样式的第一个元素，我在文档中看到我正在尝试的内容应该是正确的，我可以帮忙吗？。

这是我的组件：

import {LitElement, html, css} from 'lit-element';


class CheckboxMJ extends LitElement {
  static get properties(){
    return{
      check:{type:Boolean},
      name:{type:String},
    }
  }
  static get styles() {
    return css`
    .checkWrapper{
      font-family: Roboto;
      background-color: red;
      font-weight: 500;
      font-size:14px;
      color:#283D3B;
      border:none;
      outline:none;
      height: 150px;
      width: 300px;
      border-radius: 3px;
      overflow:hidden;
      padding:3px;
    }
    input[checkbox i]{
      background-color:red;
    }
    `;
  }
  constructor(){
    super();
    this.check=false;
    this.name="";
  }
  render() {
    return html`
      <div class="checkWrapper">
        <input class="checkbox-mj" type="checkbox" name="${this.name}" value="${this.check}"> ${this.name}
      </div>
    `
  }
}

customElements.define('checkbox-mj', CheckboxMJ);

我在使用其他组件时多次遇到此问题，一直在更改顺序和类名称，直到它起作用，但我对如何正确完成此操作感到非常迷茫，请有人告诉我如何正确使用此功能.

【问题讨论】：

标签： css lit-element lit-html

【解决方案1】：

您必须记住，复选框很难风格化。许多属性对这个输入没有影响。另一方面，您必须使用标准的 css 选择器来样式化复选框 input[type="checkbox"]。

如果您希望检查属性反映在您的复选框中，您必须这样做：

?checked="${this.check}"

查看此指南了解更多信息https://lit-element.polymer-project.org/guide/templates（将属性绑定到模板元素）。

import {
    LitElement,
    html,
    css
} from 'lit-element';

class CheckboxMJ extends LitElement {
    static get properties() {
        return {
            check: {
                type: Boolean
            },
            name: {
                type: String
            },
        }
    }
    static get styles() {
        return css `
    .checkWrapper{
      font-family: Roboto;
      background-color: red;
      font-weight: 500;
      font-size:14px;
      color:#283D3B;
      border:none;
      outline:none;
      height: 150px;
      width: 300px;
      border-radius: 3px;
      overflow:hidden;
      padding:3px;
    }
    input[type="checkbox"]{
        margin:1rem
    }
    `;
    }
    constructor() {
        super();
        this.check = true;
        this.name = "Check";
    }
    render() {
        return html `
      <div class="checkWrapper">
        <input class="checkbox-mj" type="checkbox" name="${this.name}" ?checked="${this.check}"> ${this.name}
      </div>
    `
    }
}

customElements.define('checkbox-mj', CheckboxMJ);

【讨论】：