Introduction to Web Components
At Neudesic, our consultants work with lots of different tools, frameworks, and programming languages. Having a wide breadth of knowledge about different technologies helps us to bring the right tools to help solve our customer’s problems. But having the ability to use many tools brings its own problems because we find ourselves repeatedly re-implementing the same tools and shortcuts for different frameworks. When doing web development, we have been very successful with web frameworks such as Angular, Vue.js, and React. But sometimes it would be nice to be able to share some code between them in a reusable fashion. Fortunately, the web world has heard our complaints (and others) and brought forth a web standard that all major web browsers support now called Web Components.
Web Components are a web browser technology that allows developers to extend HTML with reusable code packaged as a custom HTML element. Web Components allow developers to package HTML, CSS, and JavaScript that implements a custom component together in a way that makes the web component reusable across browsers and other web technology. Web components allow developers to utilize a shadow DOM that isolates the HTML for the web components and CSS styles so that they aren’t affected by the application that is using the custom component.
In this post, I am going to demonstrate how to build a Web Component by implementing a common component of modern web applications: a hamburger button.
Building a Basic Hamburger Button
A hamburger button has an icon with three horizontal bars, usually of equal length. When the hamburger button is tapped, a navigation menu will typically roll out from the side that contains menu items that the user can click on to navigate to different areas of the application or website. A hamburger button is typically used in a responsive website when the screen is too small, such as browsing the website on a mobile telephone).
Hamburger buttons can be rendered by graphics with a transparent background such as PNG, or using vector graphics such as SVG. We’re not going to use a graphic resource in this implementation. Instead, we will use three consecutive HTML <span> elements and will use CSS to style the elements correctly.
The HTML for our hamburger button starts off as:
We will use CSS to style the hamburger button so that each <span> element is 32x4 pixels with a 4 pixel vertical margin:
To add interactivity to the element, we’re going to use an HTML <input> element to render a checkbox without a label. The checkbox will be positioned over the hamburger button using a higher z-index value:
Finally I want the touchable button to be 32 pixels high and 32 pixels wide, and I want the hamburger button bars to be vertically aligned in the center. I’m going to add a couple of container elements and adjust the top margin of the first bar and the bottom margin of the last bar:
Changing the Button When Clicked
Because the <input> element sits over the hamburger button bars, we can react when the user clicks on the hamburger button. The checkbox for the <input> element is hidden because the opacity is set to 0, but clicking on the hamburger button really does check the checkbox. We can react to the checkbox being checked by using the checked pseudo CSS class and use CSS animation to change the hamburger button. Instead of showing three horizontal bars, we can hide the middle bar and rotate the top and bottom bars to form an X, and when the user clicks the button again, we can return it to its original state.
We can control CSS animation by using the transition CSS property. The transition CSS property lets us specify the property that is going to be animated, the duration of the animation, and the optionally specify the type of animation to be performed. We’re going to animate the changes to the transform and opacity properties of the three horizontal bars. I am also going to adjust the origin of the bars so that the transformation happens around the middle of the bar:
When the checkbox is checked and the <input> element has the checked pseudo CSS class, I will hide the middle bar by setting its <opacity> to 0. I will adjust the top bar by moving it down 8 pixels and then rotating the bar 45 degrees around its center point. I will adjust the bottom bar by moving it up 8 pixels and then rotating the bar -45 degrees around its center point:
The button looks like this when clicked:
Reporting the Button Status
The final step is that we need to let consumers of the hamburger button know if the button has been clicked or not. We’ll do this by toggling a CSS class on the custom element. When the button is clicked, we will add the expanded class to the CSS class list.
Creating the Web Component
Now let’s pack this all into a reusable web component. Our web component is created as a custom JavaScript class that derives from the HTMLElement class. In the web component, we create the shadow DOM and add our HTML elements and a <style> element containing the CSS styles that we defined earlier in this article:
To use the web component, all that you need to do is import the JavaScript file containing the web component and then you can use the <hamburger-button> custom element to render the button in your page.
Where Did We Go?
In this post, I introduced the need to have a reusable HTML control that I could use with any web-based framework. I settled on the idea of a hamburger button. From there, I designed out the HTML and CSS for the hamburger button, and added animations using CSS when the user clicks the button. Finally, I packed everything up into a custom web component that can be imported and reused in any web application. I hope that this gave you an easy introduction into how easy it is to create your own web components.
For more information about writing web components, read the Web Components articles on MDN Web Docs.
My hamburger button was inspired by a CodePen example by Erik Terwan.
