What are Web Components?
Web Components are a set of web platform APIs that allow developers to create custom, reusable, encapsulated HTML tags for use in web pages and web apps. They are based on four main specifications:
- Custom Elements: This allows developers to define their own custom HTML elements along with their behavior.
- Shadow DOM: Enables encapsulation of the style and markup, creating a shadow boundary that keeps the internals separate from other code on the page.
- HTML Templates (
<template>and<slot>elements): The<template>element is used for declaring fragments of HTML that can be cloned and inserted in the document by script.<slot>elements are placeholders inside your component that users can fill with their own markup.- ES Modules: The standard for reusing JavaScript modules in the browser, allowing developers to import and export functionality from modules.
Source: GPT-4 summary of https://developer.mozilla.org/en-US/docs/Web/API/Web_components