Web Components are a set of features that provide a standard component model for the Web allowing for
encapsulation and
interoperability of individual
HTML element
An HTML element is a type of HTML (HyperText Markup Language) document component, one of several types of HTML nodes (there are also text nodes, comment nodes and others). The first used version of HTML was written by Tim Berners-Lee in 1993 ...
s.
Primary technologies used to create them include:
* 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
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.
Shadow DOM
Shadow DOM is a functionality that allows the
web browser to render
DOM Dom or DOM may refer to:
People and fictional characters
* Dom (given name), including fictional characters
* Dom (surname)
* Dom La Nena (born 1989), stage name of Brazilian-born cellist, singer and songwriter Dominique Pinto
* Dom people, an et ...
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
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone techno ...
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.
The scoped subtree in an element is called a shadow tree. The element the shadow tree is attached to is called a shadow host.
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().
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:
Scripts will not run, and resources that are inside a template will not be fetched until the template is stamped out.
Browser support
Web Components are supported by current versions of all major browsers.
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 ar
X-TagSlim.js
Polymer
BosonicRiot.jsSalesforce Lightning Web ComponentsDataFormsJS
an
Telepathy
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. Telepathy is "closest to the metal" in that its sole focus is on helping the developer to build easily maintained webcomponents rapidly.
Community
There are numerous community efforts for the Web Components ecosystem. WebComponents.org provides an interface to search for any existing Web Components, Custom Elements Everywhere 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 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.
In 2013, Polymer, a library based on Web Components was released by Google.
References
External links
*
**
Web Components Specifications
WICG
** WICG specifications
Web Components
at MDN Web Docs
Browser Support for Custom Elements
at Can I Use?
Custom Elements Everywhere - Framework Support for Custom ElementsOpen Web ComponentsWhat are Web Components?twoBirds
{{W3C standards
Web standards
Web programming