What is Web Components?
A set of browser standards that let you create reusable custom HTML elements with encapsulated behaviour.
Why It Matters
Web components work in any framework and provide true encapsulation, preventing style and script conflicts.
Real-World Example
Creating a <date-picker> custom element that works the same way in React, Vue, or plain HTML.
“Understanding terms like Web Components matters because it helps you have better conversations with developers and make smarter decisions about your software. You do not need to be technical. You just need to know enough to ask the right questions.”
Learn More at buildDay Melbourne
Want to understand these concepts hands-on? Join our one-day workshop and build a real web application from scratch.
Related Terms
HTML
The language that defines the structure and content of web pages
Component
A reusable building block of a user interface that can be combined to create complex pages
Shadow DOM
A browser feature that isolates a component's HTML and CSS from the rest of the page.
Frontend
The part of a website or app that users see and interact with directly
React
A popular tool for building user interfaces, created by Facebook, that makes complex UIs easier to manage
Next.js
A framework built on React that adds features like page routing, server-side rendering, and API handling