Anything that can be used to manage the state of a User Interface (UI) can be considered as state management. And we see examples of state management in almost every site that we use on a daily basis. You use Gmail or any other email service. And emails have a state of read or unread. If you are playing a song on Spotify, the song that you are listening to has a state of liked or not liked. Based on these states, the UI can be shown in a different manner. 

Web Components follow a similar approach. We can use a variable inside our Web Component to keep track of the state. Let's say that we want to create a Web Component that tells the user whether the device that the user is using is online or not. So, the state here will be isOnline and its value could be either online or offline. So let's begin.

Let's call this component <online-checker>, and let's say its state is managed by an internal variable _isOnline. The definition of this component would look something like this:

export default class OnlineChecker extends HTMLElement {
  constructor() {

    // We are not even going to touch this.
    super();

    this._isOnline = false;

    // lets create our shadow root
    this.shadowObj = this.attachShadow({mode: 'open'});
  }
}

Here, we are setting the initial value of _isOnline to false, because we do not know whether we are online or not.

render() {
  this.shadowObj.innerHTML = this.getTemplate();
}

getTemplate() {
  return `
    <span class="online-status online-${this._isOnline ? 'true' : 'false'}"></span>
    <span>${this._isOnline ? 'Online' : 'Offline'}</span>
    ${this.getStyle()}
  `;
}

The render() method is the same as our previous examples, nothing special. The special part is the getTemplate() method. Here, we are adding a class online-true or online-false based on the _isOnline variable. We are also adding the text online or offline based on the same.

The getStyle() method looks something like this:

getStyle() {
  return `
    <style>
      :host {
        display: inline-block;
        border: 1px solid #cac6c6;
        padding: 10px;
        border-radius: 5px;
      }
      .online-status {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        display: inline-block;
      }
      .online-true {
        background-color: green;
      }
      .online-false {
        background-color: red;
      }
    </style>
  `;
}

The class .online-true shows a green circle and .online-false shows a red color. 

We still have not added the code to check whether the browser is online or not. So let's add it:

connectedCallback() {
  this.isOnline = navigator.onLine;
  this.render();
}

set isOnline(value) {
  if(value !== this._isOnline) {
    this._isOnline = value;
    this.render();
  }
}

get isOnline(){
  return this._isOnline;
}

Here, we are using connectedCallback() to see whether we are online or not. We are using connectedCallback() because we want to make sure that this code triggers when the Web Component is on the page.

The get isOnline() and set isOnline() methods create a property for the component that can be used outside of the component. So, say you have code that looks something like this:

document.querySelector('online-checker').isOnline;

This will return true or false, based on the isOnline property. 

So, we are keeping a track of the online or offline state of the browser inside the _isOnline variable and making this value available with the help of the isOnline property:

This is a very small introduction to properties inside Web Components as well. We will be looking at more examples in the coming sections.