Web Components: Difference between revisions

Revision as of 20:59, 18 July 2023

Revision as of 07:50, 21 July 2023

Line 4:

{{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 [[microfrontendMicrofrontend|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 22:

=== 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]], 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 ===

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 40:

</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 ==