Jump to content

Web Components: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
No edit summary
m added internal links
(16 intermediate revisions by 15 users not shown)
Line 1: Line 1:
{{Short description|Software}}
{{distinguish|HTML Components}}
{{distinguish|HTML Components}}
{{multiple issues|
{{multiple issues|
Line 4: Line 5:
{{notability|date=June 2021}}
{{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 popular approach to build [[microfrontend]].
'''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 popular approach to build [[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>
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>


* Custom Elements: APIs to define new HTML elements
; Custom Elements
: APIs to define new HTML elements
* Shadow DOM: encapsulated DOM and styling, with composition
; Shadow DOM
: encapsulated DOM and styling, with composition
; HTML Templates
* HTML Templates: HTML fragments that are not rendered, but stored until 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
: HTML fragments that are not rendered, but stored until [[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>
|website=[[MDN Web Docs]] |publisher=[[Mozilla]] |access-date=2018-07-08}}</ref>


Line 19: Line 23:


=== Shadow DOM ===
=== Shadow DOM ===
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 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" />
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" />


Shadow DOM must always be connected to an existing element, either through attaching it as a literal element or through [[script (computer programming)|script]]ing. In [[JavaScript]], Shadow DOMs are attached 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>
A Shadow DOM must always be connected to an existing element, either through attaching it as a literal element or through [[script (computer programming)|scripting]]. In [[JavaScript]], Shadow DOMs are attached 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>


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


<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
Line 37: Line 41:
</syntaxhighlight>
</syntaxhighlight>


Scripts will not run, and resources that are inside a template will not be fetched until the template is stamped out.<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>
Scripts will not run, and resources that are inside a template will not be fetched until the template is instantiated.<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 ==
== Browser support ==
Line 46: Line 50:


== Libraries ==
== 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]
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], [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 ==
== Community ==
There are numerous community efforts for the Web Components ecosystem. 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.
There are numerous community efforts for the Web Components ecosystem. 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 aka Infinite Craft


== History ==
== 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}}</ref>
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}}</ref>


In 2013, [[Polymer (library)|Polymer]], a library based on Web Components was released by [[Google]].<ref name="hacks_2015-06"/>
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.


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>
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>
Line 62: Line 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 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 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.
In 2018, 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, [[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, Lit Element was developed by the Google Chrome team as part of larger [[Polymer (library)|Polymer]] project. Lit Element was designed to be a lightweight and easy-to-use framework for creating web components.
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 ==
== References ==

Revision as of 08:37, 25 June 2024

Not to be confused with HTML Components.

Web Components are a set of features that provide a standard component model for the web[1] allowing for encapsulation and interoperability of individual HTML elements. Web Components are popular approach to build microfrontends.

Primary technologies used to create Web Components include:[2]

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[3]

Features

Custom Elements

There are two parts to Custom Elements: autonomous custom elements and customized built-in elements. Autonomous custom elements are HTML elements that are entirely separated from native HTML elements; they are essentially built from the bottom up using the Custom Elements API. Customized built-in elements are elements that are built upon native HTML elements to reuse their functionality.[4]

Shadow DOM

The Shadow DOM is a functionality that allows the web browser to render 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 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.[5][6]

The scoped subtree in an element is called a shadow tree. The element the shadow tree is attached to is called a shadow host.[6]

A Shadow DOM must always be connected to an existing element, either through attaching it as a literal element or through scripting. In JavaScript, Shadow DOMs are attached to an element using Element.attachShadow().[7]

HTML Template

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

<html>
    <template>
        <h1><slot name="title"></slot></h1>
        <p><slot name="description"></slot></p>
    </template>
</html>

Scripts will not run, and resources that are inside a template will not be fetched until the template is instantiated.[8]

Browser support

Web Components are supported by current versions of all major browsers.[9]

Backward compatibility with older browsers is implemented using JavaScript-based polyfills.

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 X-Tag, Slim.js, Polymer, Bosonic, Riot.js, Salesforce Lightning Web Components, DataFormsJS, Telepathy, and Wompo

Community

There are numerous community efforts for the Web Components ecosystem. WebComponents.org[10] provides an interface to search for any existing Web Components, Custom Elements Everywhere[11] 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[12] has a dedicated section that shows how those workarounds are used efficiently with example demo apps and similarly related topics aka Infinite Craft

History

In 2011, Web Components were introduced for the first time by Alex Russell at Fronteers Conference.[13]

In 2013, Polymer, a library based on Web Components was released by Google.[14] Polymer is canonical implementation of Material Design for web application user interfaces.

In 2016, RequireJS was introduced as JavaScript library and AMD loader plugin for custom elements.[15]

In 2017, Ionic (mobile app framework) team built StencilJS, a JavaScript compiler that generates Web Components.[16]

In 2018, 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.[17]

In 2018, Firefox 63 enabled Web Components support by default and updated the developer tools to support them.[18]

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

See also

References

  1. ^ GitHub - w3c/webcomponents: Web Components specifications., World Wide Web Consortium, 2019-01-03, retrieved 2019-01-03
  2. ^ "Web Components". MDN Web Docs. Retrieved 2019-01-03.
  3. ^ "<template>: The Content Template element". MDN Web Docs. Mozilla. Retrieved 2018-07-08.
  4. ^ "Custom Elements". www.w3.org. Retrieved 2016-12-01.
  5. ^ "What the Heck is Shadow DOM?". Dimitri Glazkov. 2011-01-15. Retrieved 2016-12-01.
  6. ^ a b "Shadow DOM v1: Self-Contained Web Components | Web | Google Developers". Google Developers. Retrieved 2016-12-01.
  7. ^ "Shadow DOM". Mozilla Developer Network. Retrieved 2016-12-01.
  8. ^ Community. "Introduction to the template elements — WebComponents.org". webcomponents.org. Retrieved 2016-12-03.
  9. ^ "webcomponents.org - Discuss & share web components". www.webcomponents.org. Retrieved 2020-07-22.
  10. ^ "Search available Web Components".
  11. ^ "Validate Front-end Frameworks with Web Components Standard".
  12. ^ "Web Components Tutorials".
  13. ^ "Web Components and Model Driven Views by Alex Russell · Fronteers". fronteers.nl. Retrieved 2016-12-02.
  14. ^ "The state of Web Components ★ Mozilla Hacks – the Web developer blog". hacks.mozilla.org. Retrieved 2016-12-02.
  15. ^ "RequireJS in Commerce".
  16. ^ "Web Component Solutions: A Comparison".
  17. ^ "How to create Angular 6 Custom Elements and Web Components".
  18. ^ "Developer Tools support for Web Components in Firefox 63".
Retrieved from "https://en.wikipedia.org/w/index.php?title=Web_Components&oldid=1230893544"