How can I change a Boolean property in Lit-Element to hide content on my component?

I have a custom component that should hide content when I set a boolean property to false. Every other property gets reflected except that one. I must be doing something wrong.

static get properties(){
      title: {
        type: String,
        attribute: 'title',
      },

      titleEnable: {
        type: Boolean,
        attribute: 'title-enable',
      },
}

constructor() {
    super();
    this.titleEnable=true;
    this.title="default";
}

render(){

    return html`                
        ${this.titleEnable 
        ? html`
        <p class="title" ?hidden="${!this.titleEnable}">${this.title}</p>
        `
        : html ``} 
    ` 
}

If I use that component like <my-component></my-component> in an HTML file it shows: default as expected.

If I use it like this: <my-component title="New Title"></my-component> it displays: New Title as expected.

BUT if I try to hide it <my-component title-enable="false"></my-component> the boolean just doesn’t change. I’ve tried !title-enable, title-enable=’false”, .titleEnable=false and all the variants you can imagine. What pisses me the most is that whenever I set in the constructor ‘this.titleEnable=false’ and I happen to just declare the variable WITHOUT value on the tag and it takes it as TRUE an “default” appears. <my-component title-enable></my-component> I am completely lost.

14 thoughts on “How can I change a Boolean property in Lit-Element to hide content on my component?”

  1. According to the documentation:

    To bind to a boolean attribute you need to use the "?", notation:

    Bind prop3 to a boolean attribute:

    html`<input type="text" ?disabled="${this.prop3}">`
    

    Boolean attributes are added if the expression evaluates to a truthy value, and removed if it evaluates to a falsy value.

    Reply
  2. Ok, this is a tricky one. You need to handle it differently by passing some object as below:

      static get properties() {
        return {
          titleConfig: {
            type: Object,
            attribute: 'title-config'
          }
        }
      }
    
      render() {
        return html`                
          ${this.titleConfig.titleEnable
            ? html`
          <p class="title" ?hidden="${!this.titleConfig.titleEnable}">${this.titleConfig.title}</p>
          `
            : html``} 
      `
      }
    
    

    In HTML:

    <my-component title-config='{"title":"shan", "titleEnable": false}'></my-component>
    

    Now, the question is why it is true every time?

    Answer: For a Boolean property to be configurable from markup, it must default to false. If it defaults to true, you cannot set it to false from markup, since the presence of the attribute, with or without a value, equates to true. This is the standard behavior for attributes in the web platform.

    It is taken from polymer doc.

    So, by creating an attribute title-enable, the HTML considers this attribute as true

    It’s really a bummer for someone who starts working on Polymer or LitElement .

    Reply
  3. This issue is because of data type. In lit-element ‘false’ | ‘true’ the type is returned as ‘string’ data type.

    Solution:

    Before that check your attribute data type is string or boolean
    
         ex: typeof attr
    
    If it return string means, you have two solution:
        1. Change the attributes date type as boolean ex: Boolean(attr).
        2. Consider the value as string and check your condition.
    
    From your example 
        if(this.titleConfig.titleEnable == 'true'){
            //true statement
        }else{
            // false statement
        }
    

    my suggestion is this.titleConfig.titleEnable == ‘true’

    Reply
  4. You can also use reflected attributes instead:

    static get properties(){
          title: {
            type: String,
            attribute: 'title',
          },
    
          titleEnable: {
            reflect: true,
          },
    }
    
    constructor() {
        super();
        this.titleEnable='true';
        this.title="default";
    }
    
    handleHidden() {
      if (this.titleEnable === 'true') return true;
      return false;
    }
    
    render(){
    
        return html`                
            ${this.titleEnable 
            ? html`
            <p class="title" ?hidden="${!this.handleHidden()}">${this.title}</p>
            `
            : html ``} 
        ` 
    }
    
    Reply

Leave a Comment