Web Components: Difference between revisions

Revision as of 12:31, 20 March 2022

Latest revision as of 01:46, 12 August 2025

(38 intermediate revisions by 27 users not shown)

Line 1:

{{Short description|Software}}

{{distinguish|HTML Components}}

{{multiple issues|

{{original research|date=June 2021}}

{{notability|date=June 2021}}

}}

'''Web Components''' are a set of features that provide a standard component model for the Webweb<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 when building [[Microfrontend|microfrontends]].

Primary technologies used to create themWeb 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>

*; Custom Elements
: APIs to define new HTML elements

*; Shadow DOM
: encapsulated DOM and styling, with composition

; HTML Templates

* 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 17 ⟶ 23:

=== Shadow DOM ===

The Shadow DOM is a functionality that allows the [[web browser]] to render [[Document Object Model|DOM]] elements without putting them into the main document DOM tree. This creates a barrier between what the developer and the browser can reach; the developer cannot access the Shadow DOM in the same way they would with nested elements, while the browser can render and modify that code the same way it would with nested elements. The impact of CSS scoped within the Shadow DOM of a particular element is that [[HTML]] elements can be encapsulated without the risk of [[Cascading Style Sheets|CSS]] styles leaking and affecting elements that they were not supposed to affect. Although these elements are encapsulated with regard to HTML and CSS, they can still fire events that can be picked up by other elements in the document.<ref>{{Cite web|url=https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/|title=What the Heck is Shadow DOM?|date=2011-01-15|website=Dimitri Glazkov|access-date=2016-12-01}}</ref><ref name=":0">{{Cite web|url=https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom|title=Shadow DOM v1: Self-Contained Web Components {{!}} Web {{!}} Google Developers|website=Google Developers|access-date=2016-12-01}}</ref>

The scoped subtree in an element is called a shadow tree. The element the shadow tree is attached to is called a shadow host.<ref name=":0" />

A Shadow DOM must always be connected to an existing element, either through attaching it as a literal element or through [[script (computer programming)|scriptscripting]]ing. In [[JavaScript]], youShadow attachDOMs Shadoware DOMattached to an element using <code>Element.attachShadow()</code>.<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM|title=Shadow DOM|website=Mozilla Developer Network|access-date=2016-12-01}}</ref>

The ability to scope [[HTML]] and [[Cascading Style Sheets|CSS]] is essential to the creation of Custom Elements. If shadow DOM did not exist, different external Custom Elements could interact in unwanted ways.

=== HTML Template ===

A HTML template is a way to insert chunks of HTML that are stampedcloned from the template at will. The syntax of HTML templates looks like this:

<syntaxhighlight lang="html">

Line 37 ⟶ 41:

</syntaxhighlight>

Scripts will not run, and resources that are inside a template will not be fetched until the template is stamped outinstantiated.<ref>{{Cite web|url=http://webcomponents.org/articles/introduction-to-template-element/|title=Introduction to the template elements — WebComponents.org|last=Community|website=webcomponents.org|access-date=2016-12-03}}</ref>

== Browser support ==

Web Components are supported by current versions of all major browsers.<ref>{{Cite web|title=webcomponents.org - Discuss & share web components|url=https://www.webcomponents.org/|access-date=2020-07-22|website=www.webcomponents.org|language=en-us}}</ref>

Backward compatibility with older browsers is implemented using [[JavaScript]]-based [[Polyfill (programming)|polyfill]]s.

== 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], and [https://www.dataformsjs.com/ DataFormsJS], [https://github.com/telepathic-elements/telepathic-element/ Telepathy], and [https://wompo.dev Wompo]

From the above list, Bosonic, Polymer, and DataFormsJS, provide ready-made components that are free to use. These components can be used interchangeably as they are all built on open web technologies.<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>{{clarify|date=December 2016}}

== 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 2011 for the first time.<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]] in 2013.<ref name="hacks_2015-06"/> Polymer is [[Canonicalization|canonical implementation]] of [[Material Design]] for web application user interfaces.

In 2016, RequireJS was introduced as JavaScript library and [[Asynchronous module definition|AMD]] loader plugin for custom elements.<ref>{{cite web|url=https://developer.adobe.com/commerce/frontend-core/javascript/requirejs/|title=RequireJS in Commerce}}</ref>

[[Firefox]] 63 enabled Web Components support by default and updated the developer tools to support them in 2018.<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 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 in 2018.<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==

* [[HTML Components]]

* [[Web framework]]

* [[Web resource]]

== References ==

Line 67 ⟶ 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}}