Jump to content

Web Components: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
→HTML Template: subject-verb agreement
No edit summary
Line 10: Line 10:
== Features ==
== Features ==


=== Custom Elements<ref>{{Cite journal|last=Hajek|first=Andrea|date=2012-11|title=‘Mmmmm quanti, ma quanti ricordi mi evocano queste foto ...’: Facebook and the 1977 Family Album: The Digital (R)evolution of a Protest Generation|url=http://dx.doi.org/10.1179/0075163412z.00000000025|journal=Italian Studies|volume=67|issue=3|pages=375–396|doi=10.1179/0075163412z.00000000025|issn=0075-1634}}</ref>===
=== 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 [[Application programming interface|API]]. Customized built-in elements are elements that are built upon native HTML elements to reuse their functionality.<ref>{{Cite web|url=https://www.w3.org/TR/custom-elements/|title=Custom Elements|website=www.w3.org|access-date=2016-12-01}}</ref>
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 [[Application programming interface|API]]. Customized built-in elements are elements that are built upon native HTML elements to reuse their functionality.<ref>{{Cite web|url=https://www.w3.org/TR/custom-elements/|title=Custom Elements|website=www.w3.org|access-date=2016-12-01}}</ref>


Revision as of 18:55, 7 June 2019

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.

Primary technologies used to create them include:[2]

  • Custom Elements – APIs to define new HTML elements
  • Shadow DOM – Encapsulated DOM and styling, with composition
  • HTML Templates, an HTML fragment is not rendered, but stored until it is instantiated via JavaScript[3]

Features

Custom Elements[4]

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.[5]

Shadow DOM

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.[6][7]

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

Shadow DOM must always be connected to an existing element, either through attaching it as a literal element or through scripting. In JavaScript, you attach Shadow DOM to an element using Element.attachShadow().[8]

The ability to scope HTML and 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

HTML template is a way to insert chunks of HTML that are stamped 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 stamped out.[9]

Browser support

HTML Templates are supported in Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera.[10]

Support for an early version of Custom Elements and Shadow DOM, known as "v0", is present in some Blink-based browsers like Google Chrome and Opera and is in Mozilla Firefox (requires a manual configuration change). The newer Custom Elements and Shadow DOM "v1" APIs are implemented in Safari, Google Chrome, and Mozilla Firefox[11][12] and are in development for Microsoft Edge.[13]

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

Libraries

There are several 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, and Smart HTML Elements.

Two of these, Bosonic and Polymer, provide ready-made components that are free to use. These components can be used interchangeably as they are all built on open web technologies.[14][clarification needed]

Community

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

History

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

Polymer, a library based on Web Components was released by Google in 2013.[19]

Firefox 63 adds developer tools support for Web Components.[20]

References

  1. ^ Web Components specifications. Contribute to w3c/webcomponents development by creating an account on GitHub, 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. ^ Hajek, Andrea (2012-11). "'Mmmmm quanti, ma quanti ricordi mi evocano queste foto ...': Facebook and the 1977 Family Album: The Digital (R)evolution of a Protest Generation". Italian Studies. 67 (3): 375–396. doi:10.1179/0075163412z.00000000025. ISSN 0075-1634. {{cite journal}}: Check date values in: |date= (help)
  5. ^ "Custom Elements". www.w3.org. Retrieved 2016-12-01.
  6. ^ "What the Heck is Shadow DOM?". Dimitri Glazkov. 2011-01-15. Retrieved 2016-12-01.
  7. ^ a b "Shadow DOM v1: Self-Contained Web Components | Web | Google Developers". Google Developers. Retrieved 2016-12-01.
  8. ^ "Shadow DOM". Mozilla Developer Network. Retrieved 2016-12-01.
  9. ^ Community. "Introduction to the template elements — WebComponents.org". webcomponents.org. Retrieved 2016-12-03.
  10. ^ "Can I use... Support tables for HTML5, CSS3, etc".
  11. ^ "Element.attachShadow()". MDN Web Docs. Retrieved 2019-01-04.
  12. ^ "Window.customElements". MDN Web Docs. Retrieved 2019-01-04.
  13. ^ "Microsoft Edge web platform features status and roadmap - Microsoft Edge Development". developer.microsoft.com. Retrieved 2019-01-03.
  14. ^ "Web Components in production use – are we there yet?". vaadin.com. Retrieved 2016-11-21.
  15. ^ "Search available Web Components".
  16. ^ "Validate Front-end Frameworks with Web Components Standard".
  17. ^ "Web Components Tutorials".
  18. ^ "Web Components and Model Driven Views by Alex Russell · Fronteers". fronteers.nl. Retrieved 2016-12-02.
  19. ^ "The state of Web Components ★ Mozilla Hacks – the Web developer blog". hacks.mozilla.org. Retrieved 2016-12-02.
  20. ^ https://blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/
Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=Web_Components&oldid=900814304"