How to set / unset attributes dynamically in vaadin components?

Flow
1

I have build a component that uses vaadin-combo-box and lit-element. I use it to populate a list of employees and select someone so that I can get information like name, email, etc. I have set the required, errorMessage, and disabled fields so that when a user of my component sets required, it will set the attribute of the vaadin-combo-box and work with all the vaadin-y goodness like error handling and validation. The component works well, but if you try to dynamically set a property like required, it doesn’t register. I am not sure what I am doing wrong, but I presume that because the component has been rendered, I would need to re-render it and set / unset these attributes that way. Can you provide any insight into this? I am not sure what phase of the lifecycle I need to trigger, but lit-element has requestUpdate and others. I could use some guidance before going the wrong direction, so I wanted to confirm that I have assessed the issue correctly.

Thanks in advance!

2

Hello,

Have you tried to bind the required attribute ?

class MyElement extends LitElement { 

    static get properties() { 
      return {
        required : {
          type : Boolean,
          default : false
        },
        error_message : String
      };
    }
	
	render() {
      return html`
      <vaadin-combo-box
        ?required=${this.required}
        error-message="${this.error_message}"
        @value-changed='${this._setValue}' 
      ></vaadin-combo-box>
      `;
    }

When you change the value of this.required to true or false, the render method is called and will add/suppress required attribute in the shadow dom.

Rémy

3

Thanks! I came to the same solution right after I posted. I appreciate the help!