I was able to utilize Web Components in order to create a simple superhero “playing card” of sorts using JavaScript and HTML. It was my first time using the tool, and I've only had limited HTML experience prior to this, but I was able to use the tool effectively and experience many of its great benefits. Through doing this, I was able to learn the value of the tool and why it is extremely important in front-end development.
First and foremost, having reusable HTML elements makes coding so much faster, easier, and reduces the risks of errors. I was able to make my first hero playing card relatively quickly, but when it came to making the second one, it was just a matter of copying and pasting the HTML element information from the first and changing the avatar and character attributes. By doing this, I was able to complete the second hero in a much faster time, utilize previously made code, and it completely eliminated the chance of me making coding errors the second time around.
Further benefits are as follows. They provide users with basic tools that can be used and implemented to make a wide variety of awesome things. And, because you can use multiple components on the same page, but they remain separate. This idea, encapsulation, allows coders the ability to modify, delete, or fix one of the custom elements without disturbing them all. Additionally, because Web Components are expressed as HTML tags, they can be used practically anywhere and are supported by pretty much all standard and popular frameworks and applications. As a whole, I really found a lot of value in learning about Web Components and I think that if they become a standardized tool, they will become a true asset to creators.
Top comments (0)