Amy Wah
This article is a continuation of my blog: ‘Everything You Need to Know About Web Components Part 1’ . Check out Part 1 if you'd like to gain some fundamental knowledge of Web Components before diving into Part 2.
The core concept of a Web Component is similar to that of components in frameworks such as React, Angular or Vue. It is a reusable UI building block that encapsulates all the HTML, CSS and any JavaScript-based logic required to render it. The big difference is that instead of relying on a specific JavaScript framework it leverages technologies natively provided by the browser so that your Web Components are framework agnostic. The technologies that Web Components leverage from the browser are features such as Custom Elements, Shadow DOM, ES Modules and HTML Templates.
You need some dropdown boxes for your next React project. What do you do? Do you build your own from scratch or do you leverage a UI component framework? In the realm of React UI Component Frameworks, there are lots of popular options: React-Bootstrap , Material-UI, the open source project Blueprint, and Semantic UI React. These frameworks are great in that the learning curve is low and the time to get a dropdown box into your site is quick. But what if you need the dropdown box to match your brand, display customized error messages, or with selection items inside a speech bubble coming out of a penguin?