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.

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

Leave a Comment