W3C Web Components Standard
Jump to navigation
Jump to search
A W3C Web Components Standard is an web application standard that is a W3C standard.
- Context:
- It can be associated with Web Components Technologies, such as Custom Elements, HTML Templates, Shadow DOM, and ES Modules.
- It can be associated with a Web Components Design Pattern, that promotes a component-based architecture.
- It can be associated with a Web Components Ecosystem.
- It can be composed of Web Components Specifications, such as:
- Custom Elements Specification: maintained by the W3C Web Components Working Group.
- HTML Templates Specification: part of the larger HTML5 specification, which the W3C HTML Working Group maintains.
- Shadow DOM Specification: maintained by the W3C Web Components Working Group.
- ES Modules Specification: part of the ECMAScript standard, which is maintained by ECMA International's Technical Committee 39 (TC39).
- It can be referenced by a Web Development Framework, such as Salesforce LWC.
- ...
- Example(s):
- ...
- Counter-Example(s):
- See: Microfrontend, Encapsulation (Object-Oriented Programming), Interoperability, HTML Element, MDN Web Docs, Mozilla.
References
2023
- (Wikipedia, 2023) ⇒ https://en.wikipedia.org/wiki/Web_Components Retrieved:2023-5-1.
- Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements. Web Components are popular approach to build microfrontend. Primary technologies used to create Web Components include: * Custom Elements: APIs to define new HTML elements * Shadow DOM: encapsulated DOM and styling, with composition * HTML Templates: HTML fragments that are not rendered, but stored until instantiated via JavaScript
2023
- chat
- Web Components consist of several specifications, each managed by a separate working group within the W3C:
- Custom Elements Specification: The Custom Elements specification is maintained by the W3C Web Components Working Group, which focuses on defining the API and lifecycle for creating and managing custom HTML elements.
- HTML Templates Specification: The HTML Templates specification is part of the larger HTML5 specification, which the W3C HTML Working Group maintains. This group is responsible for developing and maintaining the HTML language and associated APIs.
- Shadow DOM Specification: The Shadow DOM specification is also maintained by the W3C Web Components Working Group, which is responsible for defining the API and encapsulation mechanism for creating isolated DOM trees within custom elements.
- ES Modules Specification: The ES Modules specification is part of the ECMAScript standard, which is maintained by ECMA International's Technical Committee 39 (TC39). While not directly managed by the W3C, ES Modules are closely related to the Web Components standard and play a crucial role in the modular organization of component code.
- Web Components consist of several specifications, each managed by a separate working group within the W3C:
2023
- chat
- Web Components are a set of web platform APIs that allow developers to create custom, reusable, and encapsulated HTML elements for use in web applications. The goal is to provide a way to build and share reusable components across projects, improving maintainability and consistency in web development. Web Components are built using modern web standards and can be used with various frontend frameworks or even in projects without any framework at all.
- Web Components are based on four main technologies:
- [[Custom Elements: Custom Elements allow developers to define new HTML tags or extend existing ones with custom behavior. This enables the creation of new components with their own specific functionality that can be easily reused in different contexts.
- [[HTML Templates: HTML templates are a way to define inert markup that can be cloned and inserted into the document when needed. This helps to separate the structure and presentation of a component from its behavior, making it more modular and maintainable.
- [[Shadow DOM: Shadow DOM provides encapsulation by allowing components to have their own isolated DOM tree, separate from the main document's DOM tree. This isolation prevents CSS and JavaScript from leaking in or out of the component, ensuring consistent behavior and styling across different applications.
- [[ES Modules: ES Modules are a native JavaScript module system that enables modular code organization, allowing developers to import and export functionality between different files or components.
- To use Web Components in a project, developers typically follow these steps:
- Define a custom element: Create a new class that extends the built-in HTMLElement class and define the desired behavior and properties for the custom element.
- Register the custom element: Register the new custom element with the browser using the customElements.define() method, providing a unique tag name for the element.
- Create an HTML template: Define the structure and styles for the custom element using an HTML template.
- Attach the Shadow DOM (optional): If desired, attach a shadow root to the custom element to encapsulate its internal structure and styling.
- Use the custom element: Once defined and registered, the custom element can be used in HTML markup like any other built-in HTML element.