The W3C standards way of creating reusable building blocks for app development. Basically Web Components are just custom HTML elements used to compose web apps.
- Custom html elements composed to build web apps using W3C standards standard html, JavaScript and CSS
- Web Components embrace evolving browser capabilities that allow us to tackle complexity by providing true encapsulation and reuse.
- Allows enhancing built-in elements
- Simplify process of building complex web apps by hiding complexity in component implementation.
- Allows for reuse
- Provides encapsulation of appearance and behavior by keeping CSS and script separate from other components
- Frameworks do this but web components use the platform/standards.
The standards needed for web components can all be used on their own:
Web Components Standards
- HTML Templates - Defines how to declare fragments of markup that go unused at page load but can be instantiated later at runtime useing the
<template>-tag - HTML Imports - allows for HTML markup to be defined in files and imported into documents using the
<link>-tag. - Custom Elements - Specifies how to create extend current or define new types of DOM elements along with custom properties, behavior and attributes
- Shadow DOM - Encapsuling and isolating element and their style from the page as a whole.
HTML Templates
Provides a standard/native way to declare template markup using the <template>-tag. It's content is said to be inert (inactive) until instantiated. Templates can basically be inserted wherever a child node is allowed. Supported by major modern browsers.
Resources
- Webcomponents.org
- Learn Web Components - A free roadmap for learning web components
- A Complete Introduction to Web Components
- Lit
- Awesome Web Components
- Web Components Eliminate JavaScript Framework Lock-in
- Article Web Components in Earnest
- Carbon Web Components
- Kickstand UI
- Minze - JS framework for native web components.
- generic-components
- The Component Gallery
- Awesome Standalones repo
- [Web Components Examples repo]https://github.com/mdn/web-components-examples
- Shoelace - A forward-thinking library of web components.