Lit-element not applying classes static get styles

Question

I am making a simple component to test newest Lit-element a checkbox. Upon testing static get styles only the first element I style is shown, I have seen in the documentation what I am trying should be correct, may I have some help?.

this is my component:

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

I have been encountering this issue several times with other components, kept changing order, and names of classes until it worked but I feel so lost about how this should be done right, please somebody enlighten me on how to use this feature correctly.

Answer 1

You have to keep in mind that checkboxes are very difficult to stylize. Many properties simply have no effect on this input. On the other hand you have to use a standard css selector to stylize the checkbox input[type="checkbox"].

If you want the check property to be reflected in your checkbox you must do it this way:

?checked="${this.check}"

Look at this guides for more information https://lit-element.polymer-project.org/guide/templates (Bind properties to templated elements).

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