Web Components: Difference between revisions

Revision as of 13:27, 24 November 2023

Latest revision as of 01:46, 12 August 2025

(15 intermediate revisions by 14 users not shown)

Line 5:

{{notability|date=June 2021}}

}}

'''Web Components''' are a set of features that provide a standard component model for the web<ref>{{Citation|title=GitHub - w3c/webcomponents: Web Components specifications.|date=2019-01-03|url=https://github.com/w3c/webcomponents|publisher=World Wide Web Consortium|access-date=2019-01-03}}</ref> allowing for [[Encapsulation (object-oriented programming)|encapsulation]] and [[interoperability]] of individual [[HTML element]]s. Web Components are a popular approach towhen buildbuilding [[Microfrontend|microfrontends]].

Primary technologies used to create Web Components include:<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/Web_Components|title=Web Components|website=MDN Web Docs|access-date=2019-01-03}}</ref>

Line 14:

: encapsulated DOM and styling, with composition

; HTML Templates

: HTML fragments that are not rendered, but stored until [[Instance (computer science)|instantiated]] via JavaScript<ref>{{cite web |url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template |title=<nowiki><template></nowiki>: The Content Template element

|website=[[MDN Web Docs]] |publisher=[[Mozilla]] |access-date=2018-07-08}}</ref>

Line 50:

== Libraries ==

There are many libraries that are built on Web Components with the aim of increasing the level of abstraction when creating custom elements. Some of these libraries are [https://x-tag.github.io/ X-Tag], [https://slimjs.com/ Slim.js], [[Polymer (library)|Polymer]], [https://bosonic.github.io/ Bosonic], [https://riot.js.org/ Riot.js], [https://developer.salesforce.com/docs/component-library/documentation/en/lwc Salesforce Lightning Web Components], [https://www.dataformsjs.com/ DataFormsJS] and, [https://github.com/telepathic-elements/telepathic-element/ Telepathy], and [https://wompo.dev Wompo]

From the above list, Bosonic, Polymer, Telepathy and DataFormsJS, all provide ready-made components that are free to use. These components can be used interchangeably as they are all built on open web technologies. While Bosonic, Polymer & DataFormsJS have far more pre-built components.{{clarify|date=December 2016}} Telepathy is "closest to the metal" in that its sole focus is on helping the developer to build easily maintained webcomponents rapidly.<ref>{{Cite web|url=https://vaadin.com/blog/web-components-in-production-use-are-we-there-yet-|title=Web Components in production use – are we there yet?|website=vaadin.com|access-date=2016-11-21}}</ref>

== Community ==

There are numerous community efforts for the Web Components ecosystem. [https://www.webcomponents.org/ WebComponents.org]<ref>{{Cite web|url=https://www.webcomponents.org/search|title=Search available Web Components}}</ref> provides an interface to search for any existing Web Components,. Custom Elements Everywhere<ref>{{Cite web|url=https://custom-elements-everywhere.com|title=Validate Front-end Frameworks with Web Components Standard}}</ref> validates whether popular front-end frameworks are compatible and ready to use Web Components standard, with a set of pending bugs and available workarounds. Moreover, Vaadin Tutorials<ref>{{Cite web|url=https://vaadin.com/learn/tutorials?query=web%20components|title=Web Components Tutorials}}</ref> has a dedicated section that shows how those workarounds are used efficiently with example demo apps and similarly related topics.

== History ==

In 2011, Web Components were introduced for the first time by Alex Russell at Fronteers Conference.<ref>{{Cite web|url=https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell|title=Web Components and Model Driven Views by Alex Russell · Fronteers|website=fronteers.nl|access-date=2016-12-02|archive-date=2022-04-17|archive-url=https://web.archive.org/web/20220417101036/https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell|url-status=dead}}</ref>

In 2013, [[Polymer (library)|Polymer]], a library based on Web Components was released by Google.<ref name="hacks_2015-06"/> Polymer is [[Canonicalization|canonical implementation]] of [[Material Design]] for web application user interfaces.

Line 66 ⟶ 64:

In 2017, [[Ionic (mobile app framework)]] team built [[StencilJS]], a JavaScript compiler that generates Web Components.<ref>{{cite web|url=https://levelup.gitconnected.com/web-component-solutions-a-comparison-e2fa25c34730|title=Web Component Solutions: A Comparison}}</ref>

In 2018, [[Angular (web framework)|Angular]] 6 introduced Angular Elements that lets you package your Angular components as custom web elements, which are part of the web components set of web platform APIs.<ref>{{cite web|url=https://www.freecodecamp.org/news/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a/|title=How to create Angular 6 Custom Elements and Web Components}}</ref>

In 2018, [[Firefox]] 63 enabled Web Components support by default and updated the developer tools to support them.<ref>{{Cite web | url=https://blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/ |title = Developer Tools support for Web Components in Firefox 63}}</ref>

In 2018, [[LitElement]] was developed by the Google Chrome team as part of larger [[Polymer (library)|Polymer]] project. LitElement was designed to be a lightweight and easy-to-use framework for creating web components.

==See also==

Line 84 ⟶ 82:

== External links ==

*{{official website}}

**{{GitHub|webcomponents}}

*[https://wicg.github.io/webcomponents/ Web Components Specifications] [[WICG]]

**{{GitHub|WICG/webcomponents}} [[WICG]] specifications

*[https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] at [[MDN Web Docs]]

*[https://caniuse.com/?search=components Browser Support for Custom Elements] at Can I Use?

*[https://custom-elements-everywhere.com/ Custom Elements Everywhere - Framework Support for Custom Elements]

*[https://open-wc.org/ Open Web Components]

*[https://nhswd.com/blog/web-components-101-what-are-web-components What are Web Components?]

*[https://www.npmjs.com/package/twobirds-core twoBirds]

{{W3C standards}}