DEV Community: Tejeshwer Singh Sachdeva

Rendering Lists in React

Tejeshwer Singh Sachdeva — Mon, 06 Sep 2021 10:14:53 +0000

A common scenario while working on a website is to render a list of items, and that might be your follower's list, notes in a todo app, contact list, or any kind of a list. In a simple static HTML site, we use the <ul> or <ol> tag along with the <li> tags to render the list based on whether it is unordered or ordered respectively. But in today's article, we'll dive into the rendering list with ReactJS.
As we all know that ReactJS unlike other frameworks is JavaScript centric which means that it allows us to use inbuilt JavaScript functions, keywords, and classes to apply functionalities to our web page. For rendering a list of items of our web app we can use the existing JavaScript map() method.
What our map() method will do is that it will iterate over our array/list of items, take each item and perform some task on it and return the update state or UI for our application. Below is an example of how to use the map() method within a React component.

function ListRendering() {
    const avengers = [ 'Iron Man', 'Captain America', 'Hulk', 'Thor', 'HawkEye'];

    return (
        <div>
            <h1>My Avenger List</h1>
            <ul> 
                { avengers.map( avenger => <li>{avenger}</li> }
            </ul>
        </div>
    );
}

We can further optimize our markup by storing the resultant markup returned from the map method and then rendering it within our return statement, just like we did with the conditional rendering example. Here's how to do it:-

function ListRendering() {
    const avengers = [ 'Iron Man', 'Captain America', 'Hulk', 'Thor', 'HawkEye'];
    let avengerList =  avengers.map( avenger => <li>{avenger}</li>

    return (
        <div>
            <h1>My Avenger List</h1>
            <ul> 
                { avengerList }
            </ul>
        </div>
    );
}

Keys in React List Rendering

If we ran the above examples in our browser we might get an error in our console which says: " Warning: Each child in an array or iterator should have a unique key prop ".

This is one of the most common errors that show up while using react.
What this error means is that in react whenever we render an item using the map() method or through any other iteration, it should have a key prop and the value of the key prop should be unique for each item in the list. Now, why do we need the key prop?
We need a key prop because it helps react in finding which item/items in the list have been modified, updated, removed, or added, and through the key prop, react handles the UI updates efficiently. Let's take an example of what will happen when we render a list in React without using a key prop.

<ul>
    <li>Iron Man</li>
    <li>Captain America</li>
    <li>Thor</li>
</ul>

Let's now imagine we have added some functionality for the user to add a new item at the beginning of the list, and using that user enters 'Hulk' to our list. Now our updated list would be.

<ul>
    <li>Hulk</li>
    <li>Iron Man</li>
    <li>Captain America</li>
    <li>Thor</li>
</ul>

It might look fine but what has happened is that react compares each item in the current list to the previous one, example 'Hulk' in the updated list will be compared to 'Iron Man' in the previous list, and as the values are changed React will re-render the whole list rather than just render the new item 'Hulk'. This is why keys are used for the efficient handling of lists in our React app.
Let's take an example of how to add keys to our list:-

function ListRendering() {
    const avengers = [ 
                                      { 
                                        id: 1, 
                                        name: 'Iron Man'
                                       }, 
                                      { 
                                        id: 2, 
                                        name: 'Captain America' 
                                      }, 
                                      {  
                                        id: 3, 
                                        name: 'Hulk' 
                                       },
                                       { 
                                         id: 4, 
                                         name: 'Thor' 
                                       }, 
                                       { 
                                          id: 5,
                                          name: 'HawkEye'
                                       }
                                     ];
    let avengerList =  avengers.map( avenger => <li key={ avenger.id }>{avenger.name}</li>

    return (
        <div>
            <h1>My Avenger List</h1>
            <ul> 
                { avengerList }
            </ul>
        </div>
    );
}

An important point to note here is that keys in React are reserved and cannot be used within the JSX of our child component.

In a case when a unique id or some other unique value is not present in our array/list we can also use the index as a key to preventing ourselves from the error in the console, but while adding new items to the start of the list the problem will still persist similar to the condition when we had no key, this can be because by default React uses the index as the key.
But still, we can use the index as key if and only if:

Items do not have a unique value.
List is static.
List won't be filtered or re-ordered.

Conditional Rendering in React

Tejeshwer Singh Sachdeva — Fri, 03 Sep 2021 08:32:05 +0000

It might have happened or will surely happen with you that, you'd want to render the whole of the react component or a part of it based on some conditions according to the state of your component. That's where conditional rendering will save you.
In simple terms conditional rendering is a way in which we can render whole of our component or a part of it based on some condition. This almost works the same way as conditions work in JavaScript, and we can use conditional rendering in our React application in 4 ways:-

if/else conditions
Element Variables
Ternary Conditional Operators
Short Circuit Operators Let's discuss each of those ways in detail:-

If/Else Conditional Rendering

The if-else in React works similar to how they were in JavaScript. The way we can make use of them to conditionally render our component is:

class Conditions extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name = "Tejeshwer";
        }
    }

    render() {
        if(this.state.name === "Tejeshwer") {
            return ( <div> Welcome Tejeshwer </div> );
        } else {
            return ( <div> Welcome Anonymous User </div> );
        }
    }
}

This method or approach deviates from the DRY (don't repeat yourself) approach, because the part that remains unaffected of the condition has to be repeated for both if block & the else block. You might now this that why not place the if-else within the JSX.
Your thought is good but it is not possible as JSX is a syntactical sugar for function calls & object construction and because of that we cannot use if-else blocks within it.

Element Variables

In this approach we use a JavaScript variable to store that particular element which depends upon the condition of our component. The way this approach is implemented is:

class Conditions extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name = "Tejeshwer";
        }
    }

    render() {
        let userName;
        if(this.state.name === "Tejeshwer") {
            userName = <span>Tejeshwer</span>;
        } else {
            userName = <span>Anonymous User</span>
        }

        return ( <div> Welcome {userName} </div> );
    }
}

The main advantage of this approach is that it follows the DRY principle and we can render a particular part of component based on a specific condition without repeating the unaffected part again and again.

Ternary Conditional Operators

This is most widely used approach when dealing with conditional rendering. This approach uses Ternary Conditional Operators (? :) to render the element based on a specific condition. This approach is implemented as shown:

class Conditions extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name = "Tejeshwer";
        }
    }

    render() {
        return (
            <div>
                Welcome {this.state.name === "Tejeshwer" ? 
            <span>Tejeshwer</span> : <span>Anonymous User</span>}
            </div>
        )
    }
}

As you might have noticed that unlike the if-else blocks the ternary operators can be used within the JSX, this is the main benefit of using this approach of conditional rendering and also the most widely used.

Short Circuit Operator

This approach is an extension to the 3rd approach using Ternary Operators. It is used when we want to render an element on the screen only if the condition is true, else we do not want to render anything. This approach uses && operator and can be implemented in following way:

class Conditions extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name = "Tejeshwer";
        }
    }

    render() {
        return(
            <div>
                Welcome {this.state.name && 
                              <span>Tejeshwer</span>}
            </div>
    }
}

What happens in this approach is that first the left side of '&&' operator is evaluated and if the condition on the left is true the right side is returned, but if the left side is false nothing is returned.

This was all about the Conditional Rendering in React, what it is and how to implement it.
Hope you like it...

Rock Paper and Scissors game

Tejeshwer Singh Sachdeva — Wed, 04 Aug 2021 07:57:45 +0000

A rock, paper, scissor game is usually a hand game played between 2 players normally. But in this online age let's play our part in modifying this hand-based offline game and make it digital.
To make this game we'll be using HTML, CSS, and JavaScript. The final game would look something like this:-

To begin with let's start by creating 3 files within your newly created "rock_paper_scissors" folder. The files to be created within the folder are index.html, styles.css, and app.js.

Creating the Markup

Once done with creating the necessary files and folders let's begin by describing the markup/HTML for our page. For this go to your index.html file and layout the structure:-
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
</head>

<body>
</body>
</html>

We'll first layout the content for the header of our game, which looks like this:-

Within our 'index.html' inside the body tags add an <header></header> tag. The header in turn will contain a primary heading of "Rock Paper Scissors" within the h1 tag.

<!DOCTYPE html>
<html> 
    ...

    <body>
        <header>
            <h1>Rock Paper Scissors</h1>
        </header>
    </body>
</html>

Done with our header we'll now create a section to display the current scores of the user and computer. For that create a section just after our header tag.

<header> .... </header>

<section class="score-board">
    <div class="badge" id="comp-label">Computer</div>
    <div class="badge" id="user-label">User</div>
    <span id="user-score">0</span>:<span id="computer-score">0</span>
</section>

The div's with the badge class will be designed into badges to represent the user's and computer's sides. The span is used to display the score in a single line and will also help later in JavaScript to modify the scores according to the user's choice.

Now we need a section where after every choice we tell the user whether he has won or lost and what was chosen by computer from "rock, paper or scissor". To do this create a div and within that a paragraph to represent the text.

<header> ... </header>
<section class="score-board"></section>

<div class="result">
        <p id="round__result"></p>
        <p id="result__text">To begin choose one from rock, paper or scissor</p>
</div>

Now comes the main part of our markup where we create options from which the user can choose one and the game will progress accordingly. To create this, create another div with a class of choices and within this create 3 more divs with the class of choice. Within each 'choice' div we will add images of rock, paper, and scissors respectively.

<header> ... </header>
<section class="score-board"> ... </section>
<div class="result"> ... </div>

<div class="choices">
        <div class="choice" id="rock">
            <img src="https://tejeshwer25.github.io/Rock_Paper_scissors/images/rock.png" />
        </div>

        <div class="choice" id="paper">
            <img src="https://tejeshwer25.github.io/Rock_Paper_scissors/images/paper.png" />
        </div>

        <div class="choice" id="scissor">
            <img src="https://tejeshwer25.github.io/Rock_Paper_scissors/images/scissor.png" />
        </div>
</div>

Now add a little action text which tells the user what to do.

<header> ... </header>
<section class="score-board"> ... </section>
<div class="result"> ... </div>
<div class="choices"> ... </div>

<div class="action_text">
        <p>Make Your Choice Now!</p>
</div>

Great, we're now done with our HTML, take a look at your page. How does it look?
For now, it might not look great but we've created the basic structure and placed the required elements on our page.
Before applying styling and functionality let's link the CSS and JS files to our HTML file.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="./styles.css"/>
</head>

<body>

    <script src="./app.js"></script>
</body>
</html>

Adding styles to our page

Now let's make our game look nicer with some CSS styles.
But before we add styles to any of our elements let's reset the default styles provided by the browser using the * selector.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 1.6;
}

In the above styling we give padding and margin of 0 to all our elements, along with that we give it a box-sizing of border-box which specifies that the border and padding for the element should remain in the calculated element width and height.
line-height is specified to be 1.6 which gives all our text a default height of 1.6 units.

First, let's begin with styling our header element.

* { ... }

header {
    padding: 1rem 0rem;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    background-color: #f3f3f3;
    color: #333;
}

We start with giving the header padding of 1rem from top & bottom which will give our header some space rather than squishing it with the other elements, and then we align the text within it to center.

You might have noticed that other than the header most of our text in the game is of gold color and the background is a bluish color, so rather than separately specifying it for each element we'll provide these styling for the body.

* { ... }

body {
    background-color: rgb(28, 28, 59);
    color: gold;
}

header { ... }

Let's now go for the score-board.

* { ... }
body { ... }
header { ... }

.score-board {
    border: 2px solid white;
    width: 30%;
    margin: 3rem auto;
    border-radius: 10px;
    padding: 1rem 0rem;
    font-size: 2rem;
    position: relative;
    text-align: center;
}

To place the section in the center we first reduce its width to 30% and then give it a margin of 3rem from top & bottom and auto from left-right and that will place it in the center. The positioning is done to be relative because it will help us later in positioning our badges at the required place. Relative positioning keeps our element in it's natural flow but allows us to place it anywhere in the page using top, left, bottom, and right properties.
For now the badges 'User' and 'Computer' might look odd, so let's style them.

.badge {
    font-size: 0.9rem;
    position: absolute;
    background-color: gold;
    color: rgb(28, 28, 59);
    padding: 0.3rem 1rem;
    border-radius: 5px;
}

#comp-label {
    right: -20%;
    top: 30%;
}

#user-label {
    left: -15%;
    top: 30%;
}

The badge class is common to both user and computer labels so we specify the styles common to both of them in the badge selector, this is the major use of classes. For positioning the labels we've also specified the position as an absolute which will allow us to move our labels with respect to the score-board because the score-board was positioned relative(try removing the relative position property from score-board). Next to position these labels to their respective side we specify the top, right, and left properties individually to their IDs.

Now let's style the result text.

.result {
    text-align: center;
    font-size: 1.5rem;
}

For the result, we just align the text to the center and give it a font size of 1.5rem.

Let's now style the choices the user has.

.choices {
    display: flex;
    justify-content: space-evenly;
}

The choices container is given a display flex property so that all the child elements of it are in one line, and to add spacing between each element we give it a justify-content property of space-evenly.

.choice {
    width: 20%;
    text-align: center;
    border: 3px solid white ;
    border-radius: 50%;
    padding: 1.5rem 0rem;
    transition: all 0.5s ease-in-out;
}

.choice:hover {
    border: 3px solid grey;
    cursor: pointer;
    background: rgb(8, 8, 17);
}

.choice > img {
    width: 50%;
}

We then give choice(child of choices) a width of 20% so that our elements do not overflow. The transitioning is given so that when the user hovers on the element the respective hover styling appears with some effects after 0.5s. The image is given a width so that the image remains within its parent div.

Now for a short task, it is now up to you to style the 'action text' at the end.
To make our game responsive we'll now add some media-queries to it.

@media(max-width:700px) {
    .score-board {
        padding: 2rem 0rem;
    }

    #user-label {
        left: -20%;
    }

    #comp-label {
        right: -30%;
    }
}

@media (max-width: 600px) {
    #user-label {
        transform: rotate(90deg);
    }

    #comp-label {
        right: -30%;
        top: 35%;
        transform: rotate(90deg);
    }
}

The first media query will work on devices with a screen width lower than 700px. And for that case, we modify the positioning of our user and computer labels.
The next media query will work on devices with screen widths lower than 600px, and in this, we rotate our labels by 90degrees and again modify their positioning.

Adding functionality using JS

Great, we're done with our markup and we've also styled it. Our game now looks much better, you can check it yourself if you doubt 😁.
Let's now add some functionality to it, but before doing so we'll catch/cache our DOM, which is done in following manner:

const userScore_span = document.getElementById('user-score');
const computerScore_span = document.getElementById('computer-score');
const resultText_p = document.getElementById('result__text');
const roundResult_p = document.getElementById('round_result');
const rock_div = document.getElementById('rock');
const paper_div = document.getElementById('paper');
const scissors_div = document.getElementById('scissor');

let userScore = 0;
let computerScore = 0;

And this is how we cache the DOM, this is helpful as it prevents us from writing the long 'document.getElementById('')' text every time we want to modify the DOM and also improves the performance of our app. Other than caching the DOM we've also specified variables for the user and computer score.

Now let's specify what should happen when our users click on any one choice given to them.

rock_div.onclick = (e) => {
    let result = startGame('rock');
    result_text();
    resultStyle(result, rock_div);
};
paper_div.onclick = (e) => {
    let result = startGame('paper');
    result_text();
    resultStyle(result, paper_div);
};
scissors_div.onclick = (e) => {
    let result = startGame('scissor');
    result_text();
    resultStyle(result, scissors_div);
};

Here we first call the function startGame and pass it the respective argument, and the return value from startGame is stored in result variable. We then call the result_text and resultStyle functions.
Note that this won't work as we have not defined the required functions, so let's first start with the startGame function.

function startGame(userChoice) {
    let compChoice = computerChoice(); 

    if(userChoice===compChoice) {
        resultText_p.textContent = "It's a draw!!";
        return 'draw';
    } 
    else if((userChoice==='rock' && compChoice==='scissor') || (userChoice==='paper' && compChoice==='rock') || (userChoice==='scissor' && compChoice==='paper')) {
        userScore++;
        userScore_span.textContent = userScore;
        resultText_p.textContent = `Computer tried to block your ${userChoice} with ${compChoice} and failed... You Won 🔥🔥`;
        return 'win';
    }
    else if((userChoice==='rock' && compChoice==='paper') || (userChoice==='paper' && compChoice==='scissor') || (userChoice==='scissor' && compChoice==='rock')) {
        computerScore++;
        computerScore_span.textContent = computerScore;
        resultText_p.textContent = `Computer blocked your ${userChoice} with ${compChoice} successfully... You Lost 😭😭` ;
        return 'loss';
    }
}

In the start game we call the computerChoice function which we'll be declaring in a bit, but let's first go through what's happening here.
In startGame we check whether the user has won or not using the if-elseif-else chain, and then according to that, we increment the user or computers score. Along with that we also modify the scores and resultant text in our DOM which will be reflected on our app. And at last, we return a value based on the user's performance which will be stored in the result variable in the onclick event handlers.
Now let's define the computerChoice function.

function computerChoice() {
    let choice = ['rock', 'paper', 'scissor']
    let computerChoice = Math.floor(Math.random() * 3);
    return choice[computerChoice];
}

In this we define an array of choices and then we generate a random number between 0-1 using Math.random(), to keep the number in the range of 0-3 we multiply the result of Math.random() by 3. But the number would still be a decimal number so to make it an integer value we use Math.floor() which will round the number to it's lower integer(2.9 will become 2). Then the choice at that index is retured which is stored in variable compChoice in startGame().

Now let's implement the result_text function.

function result_text() {
    if(userScore >=10) {
        roundResult_p.textContent = "You won previous round";
        userScore = 0;
        computerScore = 0;
    } else if(computerScore >= 10) {
        roundResult_p.textContent = "You lost previous round";
        userScore = 0;
        computerScore = 0;
    } 

    setTimeout(() => {roundResult_p.textContent = ""}, 5000)
}

Here we check whether the user or computer has won the previous round and this updates our paragraph with round__result id which was empty initially. And using the setTimeout function we make sure that the text is removed after 5000ms or 5sec.

Let's now make our app better with resultStyle function.

function resultStyle(result, e) {
    if(result === 'win') {
        e.classList.add('win');
        setTimeout(() => {e.classList.remove('win')}, 1000)
    } else if (result === 'draw') {
        e.classList.add('draw');
        setTimeout(() => {e.classList.remove('draw')}, 1000)
    } else {
        e.classList.add('lost');
        setTimeout(() => {e.classList.remove('lost')}, 1000)
    }
}

In this function, we check the result of the user's choice and then apply the class of win, lost, or draw to the choice div accordingly. Then we make sure that the class is removed after an interval of 1 sec using the setTimeout function.
Now to make this function work we'll have to add some more styling at the end of our styles.css.

...
.choices > .win {
    border: 3px solid green;
    box-shadow: 1px 1px 15px green;
}

.choices > .lost {
    border: 3px solid red;
    box-shadow: 1px 1px 15px red;
}

.choices > .draw {
    border: 3px solid yellow;
    box-shadow: 1px 1px 15px yellow;
}

Now you can try the app, it functions pretty well and has some more styling that makes it even better.

So, here we completed our rock paper scissors game. For this project I went through FreeCodeCamp's youtube channel, you can also visit it for more of such amazing contants.

Creating a Web Component

Tejeshwer Singh Sachdeva — Thu, 22 Jul 2021 12:10:50 +0000

In this blog, we'll be creating our very own Web Component which can be used merged with our HTML. This is the second blog in the series of Web Components and if you're just starting up with this topic I would recommend you to start with this blog .

Creating a Component

To create a web component of your own follow the following steps below:-

1.Create a HTML & JS files:- First of all you'd need to create your HTML and JS files using their respective .html and .js extensions. Along with that, you will also have to link your JavaScript file to HTML using the script tag.

<script src="[REPLACE_WITH_JS_FILE_LOCATION]"></script>

2.Create a class:- Within your JavaScript file you now create a class that will define the functionalities of your web component.
Here's the format of creating a class for your web component:-

class MyComponent extends HTMLElement {
    constructor() {
        super();
        //Add/Initialize the state of our components here
    }
}

3.Attach a Shadow DOM:- Within the constructor, you can now add shadow DOM for your component. This is done in the following way:-

class MyComponent extends HTMLElement {
    constructor() {
        super();

        //Attaching Shadow DOM
        this.attachShadow({mode:'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));

What the last line does is that it takes our component structure defined in a variable named 'template' clones its content and then appends it to the child node of our shadow root element. But for that to work, we need to define a variable named template before our class.

const template = document.createElement('template');
template.innerHTML = `
    <style>
        //Add the required styling for your component here
    </style>
    <div class="[Any_class_name_you_want]" id="[Can_also_give_a_id]">
        //Add the required content here
    </div> `;

class MyComponent extends HTMLElement ....

4.Create & access attributes:- From the HTML we pass in attributes just like we do with the normal HTML tags, but to access them in our JavaScript we use the getAttribute method within the constructor.
HTML code:

<my-component my_attribute="some_value">
</my-component>

JS Code:

class MyComponent extends HTMLElement {
    ...
        ...
        this.attachShadow({mode:'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));

        this.shadowRoot.querySelector('div').innerText = this.getAttribute('my_attribute');

5.Accessing Functionalities:- To add event listeners or other JavaScript functionality to your custom component you can add an id or class to your template HTML elements defined in step 3 and then access them within your component class.
But make sure that whatever event listeners you add must be defined within the connectedCallback method, because this ensures that the event listeners fires of only when the component is connected to your web page DOM.
To remove the event listeners from our custom component you can call the removeEventListener method within the disconnectedCallback lifecycle method, which makes sure that once the component is removed from the actual DOM.

6.Encapsulate your component class into an HTML tag:- To encapsulate and export our custom elements content, styling, and functionality to our HTML we define the component at the end of our JavaScript file outside the class.

...
window.customElements.define('my-component', MyComponent);

You can now use the tag anywhere in your HTML files and it will be rendered according to how you defined it in the class.

Web Components

Tejeshwer Singh Sachdeva — Thu, 22 Jul 2021 12:09:37 +0000

Whenever we use any of those Front-end frameworks present in the market, like React, Angular, Vue, etc., we mostly break our User Interface into smaller manageable parts called the components. But have you ever thought that whether or not can we divide our UI into components without using these frameworks?
The answer to it is yes, and what helps us in doing so is Web Components.

What are Web Components?

Web Components are the collection of certain Web APIs that allow us to divide our User Interface into smaller blocks called components. It helps us to encapsulate the functionality of the component into an HTML tag, which we can then use anywhere in our web app.
Now you might think that it sounds great, but we might have to install something?
The answer to that is "no", you need not install anything to create a web component of your own, all of this is offered by Vanilla JavaScript to you.
Another interesting feature of web components is that they can, later on, be used with other frameworks like React, Angular, and Vue.

Web Components Technologies

To provide you the functionality encapsulated within some HTML tags the Web Components make use of 3 main technologies. These technologies help in creating versatile components without the risk of them colliding at any point in our Web App.
These 3 main technologies are:-

1. Custom Elements:- Custom elements allow us to create custom HTML elements of our own or to extend the pre-existing HTML elements and modify them according to our requirements. To create our own custom element we need to create a JavaScript class that extends the HTMLElement class to define the functionalities of pre-existing HTML tags. Custom Elements has certain lifecycle methods to define the events our element will go through.
Some of these lifecycle methods are:-

constructor():- Behaves similar to what the constructor in normal Object-Oriented Programming Languages behave. The constructor lifecycle method gets called when an instance of our element is created. The most common things to do within the constructor are initializing the state, adding event listeners, etc.
connectedCallback():- This lifecycle method is called when our element is inserted into the DOM(Document Object Model).
disconnectedCallback():- This lifecycle method is called anytime when our element is removed from the DOM.
attributeChangedCallback():- This lifecycle method is called when any attribute is either added, removed, updated, or replaced in our element. This lifecycle method accepts 3 parameters attributeName, oldValue, and newValue.

2. Shadow DOM:- Shadow DOM allows us to encapsulate a "shadow" DOM for our element. This encapsulates styles and markups for our self-contained components. This gives our element its own identity which makes it separate from the overall DOM of the web page.
The Shadow DOM helps in preventing the collision of styles and features of our component from the overall global styling and feature of the page. The shadow DOM is created by using the attachShadow method with our element name:

element_name.attachShadow({mode:open})

3. HTML Templates:- The HTML Templates allow us to define the encapsulated markup of the web component. The template tag stores the markup on the page and can include both HTML and CSS for our component. Slots are used to add custom text to our component. Both template and slot enable us to write markups that are not displayed on the rendered page.

Let's now create our own Web Component, refer to this blog to get detailed steps on how to create your own Web Component.