Web Components

Last updated

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 a popular approach when building microfrontends.

Contents

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><slotname="title"></slot></h1><p><slotname="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

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

MooTools is a lightweight, object-oriented JavaScript framework. It is released under the free, open-source MIT License.

<span class="mw-page-title-main">Svelte</span> JavaScript framework

Svelte is a free and open-source component-based front-end software framework, and language created by Rich Harris and maintained by the Svelte core team members.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

ZK is an open-source Ajax Web application framework, written in Java, that enables creation of graphical user interfaces for Web applications with little required programming knowledge.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

<span class="mw-page-title-main">Bootstrap (front-end framework)</span> Web design front-end

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

WebPlatform.org was a community-edited documentation website spun off by W3C. It sought to create a vendor-neutral online reference of Web platform standards. The project was a collaboration among Adobe Systems, Apple Inc., Facebook, Google, HP, Microsoft, Mozilla, Nokia, Opera Software, and W3C, who were called "stewards" of the WebPlatform project.

<span class="mw-page-title-main">Ember.js</span> JavaScript framework

Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It is designed to allow developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.

Front-end web development is the development of the graphical user interface of a website through the use of HTML, CSS, and JavaScript so users can view and interact with that website.

Velocity is a cross-platform JavaScript library designed to simplify the client-side scripting of website animation. Velocity is free, open-source software licensed under the MIT License. It is the most popular open source web animation engine.

<span class="mw-page-title-main">Polymer (library)</span> Open-source JavaScript library of Web Components

Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub. Modern design principles are implemented as a separate project using Google's Material Design design principles.

jQWidgets Software framework

jQWidgets is a software framework with widgets, themes, input validation, drag & drop plug-in, data adapters, built-in WAI-ARIA accessibility, internationalization and MVVM support. It is built on the open standards and technologies HTML5, CSS, JavaScript and jQuery. This library is used for developing responsive web and mobile applications. Some developers consider jQWidgets one of the top alternatives to the open-source jQuery UI.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript library for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and is maintained by him and the rest of the active core team members.

Angular is a TypeScript-based free and open-source single-page web application framework. It is developed by Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. The Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators. According to the Stack Overflow Developer Survey, Angular is one of the most commonly used web frameworks.

A virtual DOM is a lightweight JavaScript representation of the Document Object Model (DOM) used in declarative web frameworks such as React, Vue.js, and Elm. Since generating a virtual DOM is relatively fast, any given framework is free to rerender the virtual DOM as many times as needed relatively cheaply. The framework can then find the differences between the previous virtual DOM and the current one (diffing), and only makes the necessary changes to the actual DOM (reconciliation). While technically slower than using just vanilla JavaScript, the pattern makes it much easier to write websites with a lot of dynamic content, since markup is directly coupled with state.

htmx is an open-source front-end JavaScript library that extends HTML with custom attributes that enable the use of AJAX directly in HTML and with a hypermedia-driven approach. These attributes allow for the dynamic definition of a web page directly in HTML and CSS, without the need for writing additional JavaScript. These attributes allows tasks that traditionally required writing JavaScript to be done completely with HTML. The library was created by Carson Gross as a new version of intercooler.js.

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. 1 2 "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".
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.