What Are Web Components
I know this
Web Components are defined by MDN as "a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps".
It consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
- HTML templates: The and
elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
Most of the time, people are talking about components via a framework like React or Vue, which require their own bundle of software to do what they do because of things like JSX, Babel, Webpack and a bunch of other stuff.
Web components are a standard set by W3C that run in the browser natively and are agnostic to the environment they run in.
Throughout, the word "component" will be the global umbrella holding React components, Web components, Vue components, etc.
"Atomic Design" by Brad Frost talk about components as "organisms" that are made of "molecules" which are themselves made of "atoms". These "molecules" then make up templates which are used to create pages.
Another model is thinking about them as Legos.
- Start on paper so you can get all messy and abstract.
- Put it on a whiteboard and think in terms of sections within your component, using colors to delineate them.
- Design it in a design application, making clear the different states and behaviors.
Last modified: 202301212000