Web Components Part 3 — Lifecycle Functions

What is a Web Component

In the major frontend frameworks (Angular, Vue, React) you are able to encapsulate parts of your user interface into tags like <component/>. In recent years, the ability to do so natively has been added to the Javascript browser API in the form of the Native Web Components API. In this series, we’ll explore the different aspects of building web components. I have created a few libraries that make this process even easier such as MercedUI, ComponentZoo, FunComponent, and AMPonent.

Find my libraries at http://alexmercedcoder.com/jslib/

My Web Components Video Playlist: https://www.youtube.com/watch?v=qV7jh7ctALg&list=PLY6oTPmKnKbaNVkXHOHWxgdKEZLGKuFP9

Where we left off

In this tutorial, we won’t be continuing off the build of the previous two tutorials but just going over some additional built in functions you can override in your web component classes.

example

class MyComponent extend HTMLElement {
constructor(){
super()
}
static get observedAttributes(){return ['prop1','prop2']} connectedCallback(){
console.log('I run when the component is rendered')
}
disconnectedCallback(){
console.log('I run when the component is removed from the DOM')
}
changedAttributeCallback(name, oldVal, newVal){
switch(name){
case 'prop1':
console.log('I run when the prop1 attribute is changed');
break;
case 'prop2':
console.log('I run when the prop2 attribute is changed');
break;
}
}
}

If you read the console.logs above it should be clear what each of these functions does. There is also an adoptedCallback that would run if you have iframes on your page and you move a component from your main document into one of the iframe documents.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Merced Coder

Alex Merced Coder

Alex Merced is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.