# wicg/webcomponents

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/wicg-webcomponents).**

4,494 stars · 394 forks · HTML · NOASSERTION

## Links

- GitHub: https://github.com/WICG/webcomponents
- awesome-repositories: https://awesome-repositories.com/repository/wicg-webcomponents.md

## Description

Web Components is a set of specifications for creating reusable custom elements with encapsulated styling and logic for the web. It provides a standard for defining new HTML tags that function as independent components across different browser engines.

The system is built on three primary pillars: the Custom Elements standard for defining new tags, the Shadow DOM implementation for isolating internal document structures and styles, and the HTML Templates specification for defining reusable fragments of markup that remain inert until instantiated.

These capabilities enable modular web design through front-end style isolation and HTML template management. This architecture allows for the development of reusable UI components that maintain consistent behavior and appearance by preventing CSS leaks and DOM conflicts.

## Tags

### Web Development

- [Shadow DOM Encapsulation](https://awesome-repositories.com/f/web-development/component-based-architectures/component-based-architectures/ui-component-abstractions/shadow-dom-encapsulation.md) — Implements Shadow DOM encapsulation to isolate internal document structures and styles from the main page.
- [Web Components](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/web-components.md) — Implements the overarching standards and specifications for creating encapsulated, reusable custom elements in web applications.
- [Autonomous Custom Elements](https://awesome-repositories.com/f/web-development/autonomous-custom-elements.md) — Defines a standard model for building autonomous custom HTML elements with internal logic and lifecycles. ([source](https://github.com/wicg/webcomponents#readme))
- [Browser APIs](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-apis.md) — Leverages native web platform interfaces to ensure consistent component behavior across different browser engines.
- [Custom Element Registries](https://awesome-repositories.com/f/web-development/custom-element-registries.md) — Provides the standard registry for mapping custom HTML tags to their corresponding JavaScript component classes.
- [HTML Templates](https://awesome-repositories.com/f/web-development/html-templates.md) — Provides mechanisms for defining inert HTML fragments that can be cloned and instantiated via script.
- [Web Components](https://awesome-repositories.com/f/web-development/web-components.md) — Provides the architectural foundation for structuring web applications using isolated, self-managing elements.
- [Custom Elements](https://awesome-repositories.com/f/web-development/web-standards/custom-elements.md) — Implements the standard rules for defining new HTML tags that function as independent components across browsers.

### Software Engineering & Architecture

- [UI Component Development](https://awesome-repositories.com/f/software-engineering-architecture/component-based-development/ui-component-development.md) — Facilitates the development of a library of custom HTML tags with internal logic for cross-page reuse.
- [Component Lifecycle Models](https://awesome-repositories.com/f/software-engineering-architecture/component-lifecycle-models.md) — Implements a lifecycle-driven model that executes logic during DOM connection and attribute changes.
- [Web Component Modularity](https://awesome-repositories.com/f/software-engineering-architecture/modular-software-design/web-component-modularity.md) — Creates standardized, self-contained building blocks to maintain consistent user interfaces across various browsers.

### User Interface & Experience

- [HTML Markup Templates](https://awesome-repositories.com/f/user-interface-experience/html-markup-templates.md) — Defines reusable fragments of HTML that remain inert until instantiated within a document. ([source](https://github.com/wicg/webcomponents#readme))
- [Shadow DOM Utilities](https://awesome-repositories.com/f/user-interface-experience/shadow-dom-utilities.md) — Implements the mechanism for isolating a component's internal document structure and styles from the main page.
- [Style Encapsulations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/style-encapsulations.md) — Isolates internal DOM elements and styling from the rest of the page to prevent style conflicts. ([source](https://github.com/wicg/webcomponents#readme))
- [CSS Encapsulation](https://awesome-repositories.com/f/user-interface-experience/front-end-style-management/css-encapsulation.md) — Prevents CSS conflicts by encapsulating styles within specific components to avoid global leaks.
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Provides boundaries that prevent internal component styles from leaking out or external styles from altering the component. ([source](https://github.com/wicg/webcomponents#readme))