GivePanel

givepanel

In today's rapidly evolving web development landscape, efficiency and reusability are key factors in building robust web applications. As someone who once struggled to grasp the concept, I can assure you that learning Web Components is a game-changer.  In this post, I'll be your guide, taking you through the process step by step. Don't worry, I'll make it super easy for you to understand and implement Web Components. By the end, you'll be able to create reusable HTML elements like a pro and harness the power of encapsulation and modularity. So, are you ready to dive in and discover the amazing world of Web Components? Let's get started! What are Web Components? With Web Components, you can easily create your own reusable HTML elements. Imagine when you're building a Web App and need a Navbar. Instead of tediously writing all the HTML, CSS, and JavaScript code from scratch to make it look and function correctly, Web Components simplify the process for you. <style>
    #navbar {
        background-color: white;
        padding: 20px;
        display: flex;
        align-items: space-between;
    }
</style>
<div id="navbar">
    <img src="/images/logo.svg" width="50" height="50" alt="Company name" />
    <h1 id="navbar-page"></h1>
</div> class MyNavbar {
    constructor() {
        this.navbar = document.querySelector("#navbar");
        this.page = document.querySelector("#navbar-page");
    }
    setPageTitle(title) {
        this.page.textContent = title;
    }
} Just a friendly note We organized all the code related to the navbar in one class and file. This is a popular approach for writing front-end code when Web Components are not used. However, with Web Components, we have the ability to create our own custom HTML element, such as . By doing so, this HTML element will contain all the styles, logic, and functionality, making it reusable. So, you'll be able to use this web component anywhere in your app just like any other HTML element available in HTML. app-navbar <app-navbar></app-navbar> We created this app-navbar Web Component (don't worry, we'll learn how to do it step by step today!). It's designed to encapsulate all the styles and logic, building a layer on top. When you use this Web Component, you'll always get the same styles and logic. That's why Web Components are so reusable. Web Components offer several benefits: : You can reuse a component as many times as you want, making it a versatile tool in web development. Reusability : Web Components are based on modules, which means their definitions are typically contained in a single file. This makes it easier to maintain and locate the logic of a specific web component. Modularity : Web Components hide implementation details, allowing you to concentrate on what truly matters for your project. Encapsulation When you use Components, whether they are Web components or Components created with a , your app will have this awesome new look! front-end library/framework <app-root>
   <app-navbar page="home"></app-navbar>
   <flashcards-questions>
       <flashcards-question></flashcards-question>
       <flashcards-question></flashcards-question>
       <flashcards-question></flashcards-question>
   </flashcards-questions>
   <app-sidebar></app-sidebar>
</app-root> Then What about front-end frameworks? You can use Web Components alongside the components that most front-end frameworks support. You can keep track of their support by visiting . custom-elements-everywhere.com But Why should I learn web components? Web Components have been recently added to the Web Platform, and they function seamlessly on all modern browsers. This is incredibly significant because they are integrated directly into the browser, unlike . You don't require a separate library to utilize them. front-end frameworks/libraries Having experience in constructing Web Components will not only assist you in working with other front-end frameworks but also in comprehending the advanced functionalities offered by the browser. A Closer Look at the Low Level I wanted to mention that Web Components are actually a collection of browser APIs that work at a low level. They're really powerful because of their low-level nature, but there's a small drawback: you often end up writing more code than you might anticipate. However, don't worry! There's a fantastic high-level abstraction library called (formerly known as Lit Element) that sits on top of Web Components. It simplifies the development process and makes things much easier. Lit If you're curious, I can write an article about this topic. Just let me know in the comments section! Let's talk about the standards involved When it comes to creating Web Components, there are four main standards that play a crucial role. These standards are: ES Modules Custom Elements Shadow DOM HTML Templates . Now, let me guide you through the remaining steps in this post, one by one. Hackernoon has done a great job with ES Modules already Custom Elements Custom elements are basically your very own custom DOM elements. For instance, you can create elements like: <app-navbar> <flashcards-questions> . <flashcards-answer> To define your own DOM element, you can utilize the Custom Elements API. Here's the essential code you need to make it work: class AppNavbar extends HTMLElement {

}

window.customElements.define("app-navbar", AppNavbar); Once you use the code provided above, you can register the as a Custom Element. This will allow you to easily use it in your HTML. app-navbar <app-navbar></app-navbar> It's working! However, you won't see anything on the screen just yet because the custom element is currently empty. But don't worry, we're off to a great start! Now, let's go through the code together: We have the , which defines how your Web Component will behave. This class represents any HTML element on your webpage. Since we're creating a custom DOM element, it needs to inherit from . class AppNavbar HTMLElement If you want me to write about interfaces implemented by the HTML elements, Let me know in the comments Now, let's talk about the last part: . This line of code tells the browser that we're creating a new custom element. It takes two arguments: the name of the element and the class that describes it. In our example, we've defined a new custom element called (which means you can use it in your HTML as and its class definition is . window.customElements.define("component-name-here", NameOfClassThatDescribesIt) app-navbar <app-navbar></app-navbar>) AppNavbar Choosing a Name for Your Component 🤔 When you're selecting a name for your component, it's important to include a hyphen ( ) in the name. This is because single-word names are typically reserved for the browser's use, such as , , , , , and so on. - p div span address table Instead, developers are encouraged to use names that consist of more than one word and are separated by a hyphen ( ). This allows you to define custom element names as per your requirements. - This practice ensures that we avoid conflicts in the future. For instance, let's say you named your custom element , but browsers introduce a new HTML element with the same name a few years down the line. This could potentially break your code. navbar That's why it's essential to name your component using a hyphen. Typically, developers often use the prefix to indicate custom elements. Here are a few examples of valid custom element names: app- app-navbar app-footer app-button my-navbar side-panel chat-widget Naming the class Feel free to choose any name you like for the class, but I suggest using an uppercase version of the custom element name. Here are a few examples: If you have an element called , you can name the class as . <app-navbar> AppNavbar For , you can use the class name . <my-navbar> MyNavbar In the case of , the class would be called . <side-panel> SidePanel Lastly, if you have a , the class name would be . <chat-widget> ChatWidget Remember, these are just recommendations, and you have the flexibility to choose a name that suits your preferences. How to Override the Constructor? When you create your own constructor method, make sure to because we're extending from . By doing this, the constructor of will be invoked. If you accidentally forget to call , the constructor of won't be executed, and your custom element won't function properly. Instead, it will throw an error. call super() right at the beginning HTMLElement HTMLElement super() HTMLElement class AppNavbar extends HTMLElement {
    constructor(){
        super(); // ALWAYS start with super()
    }
}

window.customElements.define("app-navbar", AppNavbar); Shadow DOM We've just created our first custom element! So what's next? Well, now it's time to attach a Shadow DOM to it. A Shadow DOM is like a special section within the DOM where we can keep our styles and scripts separate from the rest. It acts as a self-contained environment, ensuring that they don't affect or interfere with other elements outside the Shadow DOM. To better understand, let's consider an example using an element called with its very own Shadow DOM attached to it: <dashboard-stats> <style>
    p {
        color: red;
    }
</style>
<p>Page subtitle</p>
<dashboard-stats>
    
    <p>Dashboard stats</p>
    
</dashboard-stats> The will be in red, but the won't! That's because styles don't affect or get affected by the Shadow DOM. This is great news for web development since you can now write CSS specific to a particular component without concerns about its impact on other elements on the page. For instance: <p>Page subtitle</p> <p>Dashboard stats</p> <dashboard-stats>
    
    <style>
        p {
            font-weight: bold;
        }
    </style>
    <p>Dashboard stats</p>
    
</dashboard-stats> The component will make only the paragraphs ( elements) inside it appear bold. Any paragraphs outside this component or in other components won't be affected. This feature can greatly simplify the process of creating complex applications. <dashboard-stats> <p> Attaching the Shadow DOM To attach the Shadow DOM in the of your custom element, you can do this: constructor() class DashboardStats extends HTMLElement {
    constructor() {
        super(); // do not forget super() because we're overriding the constructor()
        const shadowRoot = this.attachShadow({mode: "open"});
    }
} Attaching a Shadow DOM will look like this in DevTools: We attach the Shadow DOM because we want to have encapsulated styles and scripts. However, we haven't added any HTML yet. We'll include that in this section. mode: "open" or “closed” When creating Web Components, it is likely that most, if not all, of them will have an mode. This allows you to access the Web Component using JavaScript from external sources. We generally do not want to restrict this access. However, if there is a specific reason to prevent it, you can use the mode instead. For instance, is a Web Component that operates in "closed" mode. But in most cases, the Web Components you create will be in mode. open closed the browser's built-in <video> element open Component Lifecycle Let's talk about the lifecycle of Web Components in a simple way. When you use a Web Component on your page, it goes through different stages that we call the . lifecycle The is called when the element is created. constructor() The is called when the element is inserted into the DOM. connectedCallback() The is called when the element is removed from the DOM. disconnectedCallback() Keep in mind that these methods will only be called if you define them. For instance, the will only be called when the element is removed from the DOM, assuming you have defined this method in your component. disconnectedCallback() Usage : When you create an element and it's not yet inserted into the DOM, the function is called. This function is commonly used to attach the shadow root. Remember not to manipulate the DOM during this stage. It's better to do that in the function, where you can safely access child elements. constructor() constructor() connectedCallback() : As soon as the element is inserted into the DOM, the function is triggered. This is the right place to put any code that relies on the DOM, since the element is now a part of it. Here, you can manage attributes and add event listeners as needed. connectedCallback() connectedCallback() : When the element is removed from the DOM, the function is called. This function is often used to clean up and free up memory. Typically, it's used to remove any event listeners that were added in the function. disconnectedCallback() disconnectedCallback() connectedCallback() Code Example class AppDashboard extends HTMLElement {
    constructor() {
        super();
        console.log("AppDashboard created");
        const shadowRoot = this.attachShadow({mode: "open"});
    }

    connectedCallback() {
        console.log("AppDashboard inserted into DOM");
        // add event listeners (if necessary)
    }

    disconnectedCallback() {
        console.log("AppDashboard removed from DOM");
        // remove event listeners (that were added in connectedCallback())
    }
}

window.customElements.define("app-dashboard", AppDashboard); When you're in the , keep in mind that the element hasn't been inserted into the DOM yet. That's why it's a good idea to put your event listeners in the . constructor() connectedCallback My suggestion is to attach the shadow in the and handle all other DOM operations in the . This approach will help you visualize the distinction between the two. constructor() connectedCallback Take a peek at the code snippet below for a clearer understanding: class AppDashboard extends HTMLElement {
    constructor() {
        super();
        console.log("AppDashboard created");
        const shadowRoot = this.attachShadow({mode: "open"});
    }

    connectedCallback() {
        console.log("AppDashboard inserted into DOM");
    }
}

window.customElements.define("app-dashboard", AppDashboard);

const element = document.createElement("app-dashboard"); // "AppDashboard created" will be logged
document.body.appendChild(element); // "AppDashboard inserted into DOM" will be logged HTML Templates The element lets you declare HTML and CSS without rendering it right away. You can save it for later use. When you combine it with Web Components, you can define HTML (and CSS) code that can be utilized in a Web Component. <template> Here's an example: <template id="dashboard-template">
    <style>
        p {
            font-weight: bold;
        }
    </style>
    <p>Dashboard stats</p>
</template> This template doesn't display anything, but you'll be able to copy its content later and inject it into the Shadow Root of a Web Component. Remember, we gave this template an so that you can easily find it later using . id="dashboard-template" document.querySelector Use the Template class DashboardStats extends HTMLElement {
    constructor() {
        super(); 
        this.attachShadow({mode: "open"});
    }

    connectedCallback() {
        const template = document.querySelector("#dashboard-template");
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
}

window.customElements.define("dashboard-stats", DashboardStats); When you use this, it injects a copy of the content from the and puts it inside the shadow root of the . As a result, you'll have an element on your page that displays in bold. <template> dashboard-stats Dashboard stats Take a look at the DevTools to see how it appears. Let's go through the code together: I recommend manipulating the content of the custom element in the , although you can also put this code in the if you prefer. connectedCallback constructor() To begin, we find the template by using . const template = document.querySelector("#dashboard-template") When you use , you automatically gain access to the shadow root through . this.attachShadow this.shadowRoot Next, we create a copy of the template's content using . We need to clone it because the template can only be used once. By cloning it, you'll be able to use it again in the future. cloneNode(true) The function has one parameter called . When you call , it sets the deep parameter to true, which ensures that children elements are also cloned. cloneNode() deep cloneNode(true) Finally, we use to add the cloned template's HTML into the shadow root of the current custom element. this.shadowRoot.appendChild() You might be thinking that setting this up requires a lot of code, and you're absolutely right. That's why many people recommend using a Web Components library like . lit Let's talk about Attributes and Properties Your Web Components can also have custom attributes, just like regular HTML elements. For instance: <app-dashboard theme="dark"></app-dashboard> To read the attribute from within the component, here's what you can do: theme="dark" class AppDashboard extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: "open"});
    }

    connectedCallback() {
        console.log(this.getAttribute("theme")); //"dark"
    }
}

window.customElements.define("app-dashboard", AppDashboard); In HTML, there's a limitation where attributes can only be in the form of strings. Even boolean values need to be enclosed within a string. So, to pass a boolean attribute, like , you would use or , treating it as a string. Afterward, you'll need to convert it to a boolean by comparing it to the string . is-dark is-dark="true" is-dark="false” “true” const isDark = this.getAttribute("is-dark") === "true" ? true : false; Please keep in mind that any changes you make to this attribute will not update automatically. There is a process you can follow to subscribe to attribute changes, but that goes beyond the scope of this post. However, if you're interested, I'd be happy to write a dedicated article on this topic. Let me know in the comments if you'd like that 🤗 Properties Properties are a great way to store information in a Web Component. Unlike attributes, which only accept strings, properties can hold any data type. They are like variables that are attached to the instance of an element. Let me give you an example: <app-dashboard theme="dark"></app-dashboard> const dashboard = document.querySelector("app-dashboard");
// existing properties
dashboard.nodeName; // APP-DASHBOARD (automatically created by the browser)

// Define your own property
dashboard.graphs = [{
    //...
}]; The Web Component has a property called , which holds an array of objects in this example. app-dashboard dashboard.graphs That’s a Wrap Web Components are just plain HTML, CSS, and JavaScript! They're actually easier to learn compared to some front-end frameworks. But here's the thing: there's a chunk of code that keeps repeating in every component, which can sometimes interfere with your own logic. It becomes even more true when you're dealing with templates that have dynamic data, attributes, and properties. That's why, if you're interested in working with Web Components, it's recommended to use a small library on top of them. One great example is Lit. It's lightweight, weighing less than 6KB, and it lets you define your Web Component using a user-friendly syntax. If you'd like a brief introduction to Lit, feel free to let me know in the comments!

Web Components Exposed: Empowering Frontend Developers For Unparalleled Success

Let me start with a simple scenario. In the below example, We have a user, Bill, who wants to access our database of books. He searches for books from 1985. We make an API call, and deliver the results to the page. The main question here is, how should we display the data once it’s been retrieved? Above is a pretty typical layout for displaying the data. The search bar at the top, and the results below the search bar, once the data is loaded. However, this creates a minor problem, scrolling. Now, we are requiring the user to scroll through so much data to find what they’re looking for. Maybe Bill doesn’t mind. But suppose he’s searching for an obscure book from 1985. Maybe he would recognize the title if he saw it, but he’s got to scroll all the way to the bottom, then go to page 2 and then page 3 and then page 4 before he finds it. What we’re requiring Bill to do might look like this: Now, in all fairness, this is pretty typical and so, as users, we’ve come to expect this from many sites, and so the average user probably doesn’t mind much anyway. But, just for the sake of fairness, let’s create a more elegant, 1 page design for Bill, using JavaScript and JQuery. I like to draw my ideas out first, so here’s what I had in mind: In this crude example, we’ve completely cleaned up the site, and leave lots of breathing room and negative space which I’m sure Bill will appreciate. We’ve created a side panel where all the controls will be. The user will search here, and see the results in the same panel. In our simple case, we don’t even need to display all the data for every book. We could simply display the title of each book. Then, when it’s clicked on, the full synopsis, image and information would appear on the main content area. The data, in this case doesn’t really matter. This could be for toy airplanes, books, video games, or princess dolls. In either case, for me personally, I prefer the simple, clean, Single Page design. STEP 1 : HTML The HTML could be pretty basic. <body><div id="sidepanel" class="sidepanel"><input id="input" placeholder="what do you want?" /><button type="submit" id="submitBtn">Go</button> <div id="dynamicSideContent"> //--Content goes here--//</div> </div><div id="content" class="content"> //--Content goes here--// </div> </body> Depending on the scenario, this is really all we need. Yes, eventually we’ll pretty it up with a banner and a logo and all the stuff that real sites usually have. But at the end of the day, since all our data is going to be dynamically generated, this is all we need. We have: A) side panel Search Bar Content Loading Area B) Content Div Content Loading Area Step 2: Make the API Call $(window).load(function() {  
  console.log("talking"); fetch(' {if (response.status != 200) {window.alert("Oopsie Daisy");return;} myApi_URL_thingy').then(function(response) response.json().then(function(data) { Step3: Parse the Data We have our data now, in some shape or form. Our end goal here, is to get some book titles, or whatever, do display in our sidepanel. Here are a couple of problems we may face in doing that: Problem : Each button will correspond to a book within our data. Each button will have a book title inside it. We don’t want to use a link, since that will navigate us to a new page. Instead, we want to display it in our content area to the right. If we were using links, we could simply store the links in our data file. when the user clicks on a link, we would pull that piece of the data, access the url and redirect the user. But we don’t want to do that. To get around this, we’ll need to dynamically create id’s for each button, and then, store data in the button id about each book so that we can access and display it in the content area. We can do that with a for loop when we parse our data. In the below example, I’m going to instead use the scenario that our user, Bill is searching by author instead of Date, because that’s just more fun. let input = document.getElementById('input');let submit = document.getElementById('submitBtn');submit.onclick = searchData; function searchData () {let currentBook = [];let input = document.getElementById('input');for (var i = 0; i < books.length; i++) {let val3 = input.value;let val2 = val3.toLowerCase();let value = val2.replace(/ /g, '');let text3 = books[i].author;let text2 = text3.toLowerCase();let text = text2.replace(/ /g, '');console.log(text.indexOf(value) >= 0);console.log(text);console.log(value);if (text.indexOf(value) >= 0) {currentBook.push([books[i], i]);} } What I did here, is try to think of what a User might do. Bill might want a book by Dr. Laura Ingram. But, poor Bill, his memory is fading…and all he can remember is “Laura”. So he searches for authors by submitting “Laura” into the input. What the above does, is it converts the input to lowercase, then removes any spaces in the input. Then for the current API entry, I do the same thing to the author. This way, if Bill Searches for “Laura” and the actual author is listed as “Dr. Laura Ingram”, JavaScript is actually comparing these two strings: “laura” and “dr.lauraingram”. If we hadn’t done that, it would be comparing: “Laura” to “Dr. Laura Ingram”, and it might be more difficult to match the results with the uppercase and additional spaces. We want to compare apples to apples instead of apples to oranges. Now that we have two similar strings, we do this: if (text.indexOf(value) >= 0) {currentBook.push([books[i], i]);} What we’re doing now that we have these two strings, is seeing if the current iterable book author contains a substring of the user Input. Since “dr.lauraingram” does have the substring “laura”, it would make the match. Now, again, this could create a host of other problems that we would have to tackle, like lots of results that aren’t what Bill intended, but let’s not forget, it’s Bills fault, and his memory problems that got us into this mess in the first place! Moving on… In any case, at this point, we should have the book that Bill is searching for, and we’re displaying it, and any other matches in the side column. But remember, we want to put the content of the book in the button Id somehow. We’ve just pushed all the matched books to an array called currentAuthor. Let’s dissect that array with a for loop, and create buttons using backticks. Then we’ll insert the ID into the button using the template expression. for (var i = 0; i < currentBook.length; i++) {currentBook[i] = `<button id="id_${currentBook[i][1]}" class="btn7">${currentBook[i][0].author}-${currentBook[i][0].title}</button>`;document.getElementById('dynamicSideContent').innerHTML += currentQuote[i];}} So, what I’ve done here is looped through currentBook. Then, for each entry in the array, I’m assigning it a new value with a template expression. The template expression consists of just a button with an ID, a class and text inside the button: <button id="id_${currentBook[i][1]}" class="btn7">${currentBook[i][0].author}-${currentBook[i][0].title}</button> Now, if you noticed, when I looped through my initial book array, I pushed the matched books, “books[i]”, but I also pushed the iteration number “i”, both into an array. Since each iteration number is unique, I can use that as part of my button ID, which I did there. The button, defined in the template expression is : id_${currentBook[i][1]} But, which means that each book ID will actually be “id_1”, “id_2”…and so on. One other thing to point out is that the class is “btn7”. Because we can’t access those IDs within JavaScript, we’ll actually use JQuery to access the class first, and then get the ID after we have accessed the class. We’ll simply do that with each button click. The pseudo code would be, “If a button with btn7 class is clicked, do something”. Here’s how we’ll write that with the help of JQuery: $(document).on('click', '.btn7', function () {let currentBook = [];let id = this.id;let currentId = id.split("_");let idNumber = parseInt(currentId[1]);let disregard = parseInt(currentId[0]);for (var i = 0; i < books.length; i++) {if(i == idNumber ) {currentBook.push(books[i]);}} What I’ve done here is just that. We listen for any time that a button with the class “btn7” is clicked. We know that button has an ID, so we access it with “this.id” and assign it to a variable called “id”. Then, we split that ID string: let currentId = id.split("_"); Our Id’s all start with “id” followed by an underscore and then a number. string.split() will turn that into an array, we don’t need the id, or the underscore now…we only want the number. We get that by converting the currentID variable into a number let idNumber = parseInt(currentId[1]); Then, in our for loop, we see if the idNumber matches the iteration of the current book. If there’s a match, that’s the one we want. for (var i = 0; i < books.length; i++) {if(i == idNumber ) {currentBook.push(books[i]);} When we initially searched our array, we saved that index value, and then we’re using it again to make sure we match the dynamic button that the user clicked. Now that Bill clicked what he wanted, we need to display that in our content area. We’ll use the same template expression format we used earlier to create that and send it to the HTML. for (var i = 0; i < currentBook.length; i++) {currentBook[i] = `<span class="container"><h1 class="bookTitle">${currentBook[i].author} - ${currentBook[i].title}</h1><p class="synopsis">${currentBook[i].text}</p></span>`document.getElementById('content').innerHTML += currentBook[i];} At this point, we’re just parsing the array we just created with a for loop. Unless we also need to do something with this data, we don’t need to create the ID’s again, but we could do that again if we needed to. Here, we’re just taking that button click, and putting the matching book onto the main display. Again, there are many, many ways to do something like this, and probably a lot that are way better and simpler than mine, but I think it’s at least a step in the right direction. Let me know if you have any feedback. Thanks!

Stories, News & Mentions about GIVEPANEL

Givepanel’s Stories on HackerNoon