LiveCycles

The native web component API has lifecycles methods:

• connectedCallback;
• disconnectedCallback;
• attributeChangedCallback;
• adoptedCallback;

CWCO simply renames them and "fixes" a couple of things about some of them.

onMount

This livecycle function is called when the component is inserted in the document soon after the first render.

class BFSButton extends WebComponent {

	onMount() {
		console.log('mounted', this.mounted, this.isConnected)
	}
	
}

BFSButton.register();

// will trigger onMount call
document.body.appendChild(new BFSButton())

onMount Cleanup

One handy detail about onMount is that you can return a function which will get called when the component is removed from the DOM before the body of onDestroy gets executed.

class TodoApp extends WebComponent {
	todos = [];
	
	onMount() {
		// return the unsubscribe function so the subscription
	  // gets cleanup when the component is removed from the DOM
		return todoStore.subscribe(async () => {
      this.todos = await todoStore.getItems();
		})
	}

}

This is perfect to unsubscribe from things, cleanup timers, cancel animations, etc.

class TimeCounter extends WebComponent {
	time = new Date();
	
	get template() {
		return <p>{time.toLocaleString()}</p>
	}
	
	onMount() {
		const timer = setInterval(() => {
			this.time = new Date();
		}, 1000);
	
		return () => clearInterval(timer);
	}
	
}

It can be perfectly used alongside or instead of onDestroy lifecycle function. If alongside, know that it will be executed before the onMount method.

mounted

You can verify if the component is in the DOM by checking the native isConnected or WebComponent "mounted" property.

We suggest you to use mounted property instead of isConnected as it will better tell you if the component is in the DOM and its template was parsed and set as well.

What happens during mounting?

CWCO will set the shadow root up according to the configurations you set.

Internally, it listens to the connectedCallback and then access the template to parse it into elements while tracking the parts of the template you want to data bind.

Once it is done parsing and tracking the template it set the elements as the component body content.

If you remove the component element from the DOM and attach to it again, it will trigger a onMount but it will not parse and track the elements again. Parsing and tracking only happen once. In this scenario, it will simply try to update the component body elements in case you placed it inside a different component with different context data.

parsed

There is also a parsed property you can check to verify if the component is parsed or ever been attached to the DOM.

const btn = new BFSButton();

btn.mounted // false;
btn.parsed // false;

document.body.appendChild(btn);

btn.mounted // true;
btn.parsed // true;

btn.remove();

btn.mounted // false;
btn.parsed // true;

The parsed property will always confirm if an element ever been attached anywhere on the DOM.

constructor

In case you want to do things before the component is mounted you should use the constructor.