Lit 元素未应用类静态获取样式

Question

我正在制作一个简单的组件来测试最新的 Lit 元素 checkbox。在测试 static get 样式时，只显示了我样式的第一个元素，我在文档中看到我正在尝试的应该是正确的，我可以得到一些帮助吗？

这是我的组件：

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

我在使用其他组件时多次遇到这个问题，一直在更改类的顺序和名称，直到它起作用，但我对如何正确完成这件事感到很迷茫，请有人赐教如何正确使用此功能。

Answer 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);

Lit 元素未应用类静态获取样式

Lit-element not applying classes static get styles

css

lit-element

lit-html

Lit 元素未应用 类 静态获取样式

Lit-element not applying classes static get styles

css

lit-element

lit-html

Lit 元素未应用类静态获取样式