top of page

Coding My Very First Web Component

Updated: Jun 22, 2023

I asked my SheSharp mentor, Desirée Hof, what to learn next as a front-end software developer. She suggested I look into web components because it’s a technology widely used by most companies that also helps to understand the foundations of frameworks like React and Angular.


I started reading about the topic but everything was a little too abstract, so I decided to learn by doing. I followed a simple MDN tutorial (here) to create an “autonomous custom element” – an element that doesn’t inherit from any pre-existing HTML element (the other type of web component is a “customized built-in element” that inherits and expands from HTML elements). I immediately saw the usefulness of the MDN example, a pop-up info box like the ones we see when filling in a form and there is a little question mark beside the label with information for the user. I wanted to adapt the example into something related to my previous experiences. I worked in museums for many years, where we must document loads of objects. Of course, it’s important that everybody involved in documentation knows how to fill in each entry on a cataloging form. The custom popup-info box I created looks like this:



A mouse moves over a question mark icon, causing a hover tooltip to display to the user.


It provides tips and examples to remind the user of what to write in each field (you can access it live here).


I won’t go too deep into the project’s technical details as the MDN tutorial does a great job, but I’ll try to summarize the main points of what I learned as it might help another beginner. First we create a class (PopupInfo) in JavaScript that extends the HTMLElement class.



In the class, we attach a shadow DOM tree to the new element. The shadow DOM tree “hides” the structure of the new markup we are creating, so that styling that is applied to the rest of the code will not affect our element.



We then set the parts of our custom HTML element. First, we create a nested <span> with the classes "wrapper", "icon", "info", and set "tabindex" to 0 for the element to be focusable in sequential keyboard navigation.


Screenshot from a code editor.

We define that the content inside of the box will come from the "data-text" we define on the HTML file:


Screenshot from a code editor.

HTML:


Screenshot from a code editor.

We also include the <img> of the little question mark.


Screenshot from a code editor.

We then define and apply style:


Screenshot from a code editor.

We attach all created elements to the shadow DOM:


Screenshot from a code editor.

And finally, we apply the .define() method to customElements with the name of the element we created ("popup-info") and the constructor PopupInfo as arguments:


Screenshot from a code editor.

The GitHub repository is here.

This brief exercise obviously didn’t teach me everything about the inner workings of web components, but I learned what they are and why they are important. Even better, I made something useful that works! I will continue looking into them and implementing them in my projects, and I hope this brief introduction will encourage another newbie to learn about this important topic.

76 views0 comments

Recent Posts

See All

Comments


bottom of page