Lifecycle Events

Web Component lifecycle events are callbacks or "hooks" for intercepting web component code as components are constructed, added to the DOM, and changed.

connectedCallback

The most notable web component lifecycle event is connectedCallback. This method is called after a web component is attached to the DOM. This is most often the place where initialization of component data takes place.

class PageComponent extends wire.ui.WebComponent {

    async connectedCallback()       

        const productDataSet = ...;
              
        this.products = await productDataSet(this.productId).execAsync();        
    }

   static get properties() {
    return {
      products: true,
      productId: true
  }
  
}
customElements.define('my-page', PageComponent);

wrAppReady

Because web components are added to the DOM independently, connectedCallback cannot handle dependencies between components where a ready state for one is required before another can be initialized.

The most common example of this is an application developed using nested components where it may be required that an application level initialization be completed before any components should render. To accomplish this using web components, use WireBootstrap's wrAppReady events.

The example below uses a top level component called my-app. It calls wrSetAppReady when it has finished its initializing which fires wrAppReady in any child component.

class AppComponent extends wire.ui.WebComponent {

    connectedCallback() 
          
        super.connectedCallback();
        
        // application initialization
        // global state
        // user profiles
        // menus
        // security
        // pull server configuration
        // etc
        
        super.wrSetAppReady();   
            
    }
    
    static get template() {
      return '<my-page></my-page>';
    }
}
customElements.define('my-app', AppComponent);

Child component data initialization is moved from connectedCallback to wrAppReady.

class PageComponent extends wire.ui.WebComponent {

    async wrAppReady()       

        const productDataSet = ...;
              
        this.products = await productDataSet(this.productId).execAsync();        
    }

   static get properties() {
    return {
      products: true,
      productId: true
  }
  
}

attributeChangedCallback

After web components are connected to the DOM, the attributeChangedCallback event will be fired when an attribute changes outside of the component.

In the example below, the productId attribute on the component is changed . The attributeChangedCallback method is used to call the data service for updated data and rebind the products list.

class PageComponent extends wire.ui.WebComponent {

    async attributeChangedCallback(name, oldValue, newValue)       

        if(name == "productId") {
        
            const productDataSet = ...;
            
            this.products = await productDataSet(this.productId).execAsync();        
         }
    }

   static get properties() {
    return {
      products: true,
      productId: true
  }
  
}

wrObjectChanged

Web component attributes do not natively handle working with objects. WireBootstrap for Web Components adds this capability. The wrObjectChanged event is the object equivalent of attributeChangedCallback .

In the example below, the products list is passed into the web component as an object attribute. Any changes to this list can be picked up in the wrObjectChanged event.

class PageComponent extends wire.ui.WebComponent {

    async wrObjectChanged(obj, name)   
        
        if(name == "products"){            
            // products list changed
        }
    }

   static get properties() {
    return {
      products: true,
      productId: true
  }
  
}