Lets talk a little bit about web components.
What are they?
Simply put, A web component is a collection of api's that allow you developers to display information on a website.
I like to think of them as reusable puzzle pieces that can be slotted into different areas when needed. This helps for code reuse on a massive scale. In many ways its similar to classes in object oriented programing.
Web components extend HTML and means that we can create our own tags.
Web components due to their nature provide a focus on compatibility and accessibility which are two key components when designing any website. They can allow for quick and easy changes to the entire site making the website easier to access for those with disabilities.
How do they work?
If the element is open source its possible to build upon what already exist rather than start from scratch , this is what makes them so reusable but of course this is an option as well.
Web components are built on top of frameworks can increase accessibility by adapting a standard and that don't changing as often as the frameworks themselves. This allows them to be more reliable and future proof. There are four main standards for web components they include Custom Elements, HTML Templates, ES Modules, and Shadow DOM.
Are there any examples I can learn from?
There are many websites that you may visit daily that utilize web components these sites include. The sites that I have chosen to investigate YouTube, Microsoft product website, and Amazon !
Check out my video below going more into depth on how these popular web site use web components.
You can learn more about web components here : https://developer.mozilla.org/en-US/docs/Web/Web_Components
Top comments (0)