Лит-элемент не применяет классы stati c get styles

Question

Я делаю простой компонент для проверки новейшего Lit-элемента флажок . После тестирования stati c get styles отображается только первый элемент, стиль которого я вижу, я видел в документации то, что я пытаюсь исправить, могу ли я помочь?

это мой компонент:

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"].

Если вы хотите, чтобы свойство check было отражено в вашем флажке, вы должны сделать это следующим образом:

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