I have built a custom inputSelect component:

    <div class="slds-select_container">
        <select class="slds-select select-input" data-rea={reatag}>
            <option value="">None</option>
            <template for:each={options} for:item="optionstr">
                <option value={optionstr} key={optionstr}>{optionstr}</option>


import { LightningElement, api } from 'lwc';

export default class ReaInputSelect extends LightningElement {
    @api value;
    @api options;
    @api reatag;

    renderedCallback() {
        let curSelect = this.template.querySelector(".select-input");
        if(this.value) {
            curSelect.value = this.value;

    @api getSelectValue() {
        let curSelect = this.template.querySelector(".select-input");
        return curSelect.value;

It works okay. But the problem with this one is: when the value passed through @api is changed, it doesn't rerender. The reason is pretty obvious since it only sets the value during renderedCallback() time.

I tried to find a lifecycle hook in this page: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_lifecycle_hooks . But it doesn't seem to be a hook for the changing event of @api attributes.

How should I resolve this?

  • what is it exatly you are expecting to be re-rendered when the value property changes? – glls Apr 15 '19 at 4:33
  • @glls reload the latest value into the select input box. So the user can bulk update from parent component – Lance Shi Apr 15 '19 at 4:38
  • Why not use, onchange event handler on your select element to set the value and use @track instead of @api? – glls Apr 15 '19 at 4:41
  • @glls I am not sure what you mean here. Can you post a sample code? I am using api to set the default value not to capture the current change. And on api change thing is for the samilar purpose – Lance Shi Apr 15 '19 at 4:44
  • .@api is used to expose a property publicly, to track changes to a selected property, use @track – glls Apr 15 '19 at 4:45