Web Components

Article Info

Contributed by
4 authors

Last updated on
2022-02-15 11:49:34

Shadow DOM
Polymer (Library)
Polyfill
Material Design
CSS Modules
Accelerated Mobile Pages

Article Versions

7 2022-02-15 11:49:34
3320,2558 7,3320

By devbot5S

Migrating blockquotes to markdown syntax
6 2021-05-28 04:46:37
2558,1905 6,2558

By arvindpdmn

Updated browser support image.
5 2020-01-06 12:34:56
1905,1065 5,1905

By arvindpdmn

Updated See Also
4 2018-11-28 16:36:59
1065,548 4,1065

By hemanthSK

AMP expansion corrected.
3 2018-06-08 08:11:42
548,547 3,548

By dineshpathak

Clarification that WC is being standardized by W3C

Chat Room

Submitting ...

You are editing an existing chat message.
2021-05-28 04:47:12
-

By devbot5S

[URL Check] The following URLs in this article are outdated. Please update.

Redirected URLs:
Discussion: https://www.ampproject.org/ → https://amp.dev/
Discussion: https://www.w3.org/TR/html5/scripting-1.html#the-template-element → https://html.spec.whatwg.org/multipage/scripting.html
Discussion: https://www.w3.org/standards/techs/components#w3c_all → https://www.w3.org/TR/?tag=browser
Further Reading: https://andrewrabon.com/the-case-for-react-like-web-components-63887335fe41?gi=75d13b69834f → https://medium.com/@andrewrabon

A webpage can be composed from modular self-contained parts. Source: Fink 2016, slide 8.

A webpage can be built in two ways: either as a monolithic unit of HTML tags or as a composition of individual parts: header, footer, menu, main body, side panel, and so on. The latter is easier to maintain due to its modular nature. Such modular design has been in common practice on the server side where pages are dynamically generated from modular views. Web Components enables this on the client side.

While the use of components is possible with frameworks or libraries such as Ember, Backbone, Angular or React, Web Components is a W3C standard. It relies on nothing more than HTML, CSS and JS. It can therefore work on all browsers, can complement and be reused across frontend frameworks. Libraries built on top of Web Components are also making development simpler.

Discussion

What exactly is a web component?
Here's one way to define a web component,
A component is a small, potentially re-usable set of logic, behaviors and interface elements (UI or API).
This definition is not just about the frontend element's presentation but it's also about its behaviour. Consider a clickable button. The component for this could define the styling in terms of padding, colours and fonts. It could also define the behaviour: how the styling changes on mouse hover or mouse click; what happens when mouse is clicked. Another example is an image slider. These are usually implemented using HTML, CSS, and JavaScript, all of which can be encapsulated as a custom tag for reusability.
Web Components is being developed by W3C as a set of standards. Once fully standardized and implemented by browsers, it will change the way we design web apps.
What are the advantages of adopting Web Components?
Here are some advantages of Web Components:
- Reuse: A component is made once and can be reused across different pages, apps, or frameworks.
- Support: Once fully standardized, it will work on any browser without additional libraries.
- Maintenance: Since the design is modular, and components are self-contained, they're easier to maintain.
- Encapsulation: Each component on the same page can potentially have different styling. We need not worry about clashing element identities. This is due to what's called Shadow DOM.
- Reliability: Code is not spread across HTML and JS files, thereby avoiding inconsistencies.
- Flexibility: Components can be written inline, imported or even compiled.
- Composability: Components can use or interface with other components.
What the main parts of Web Components?
An explanation of Web Components. Source: The Startup Lab 2017.
Web Components have four enabling parts:
- Custom Elements: We can create custom HTML tags/elements and define their initialization and behaviour. These can be created using JavaScript APIs. The use of ES6 Class is recommended rather than create a prototype Object.
- HTML Templates: Tag <template> provides a markup template that can then be reused in multiple places. Templates themselves are not displayed; only their instances are displayed.
- HTML Imports: A HTML file can import another HTML file. Thus, components defined in one file can import components defined in another file.
- Shadow DOM: This is an encapsulated DOM tree that's separate from the main document DOM. This encapsulation ensures that the component will work regardless of the page in which it's used.
How should I use attributes, properties and events in my components?
Pass data in and out only via standard interfaces to keep components interoperable. Source: Dodson 2016.
In the spirit of reuse and composability, use attributes and properties for data input. Dispatch events for output. For example, if a button is clicked, dispatch an event so that other components can take appropriate action. Don't bubble events unless they have semantics.
Use attributes to initialize. Use properties to reflect state. Every exposed attribute should have a corresponding property. Reflecting a property change to an attribute is generally not a good idea. This is because attributes are limited to string values. This means that expensive serialization and deserialization is needed to pass arrays and objects as strings via attributes. Therefore use properties instead.
Favour declarative over imperative API. For instance, avoid changing state via method calls that don't update property or dispatch events.
Could you share some best practices for working with Web Components?
Here are some best practices:
- When defining custom elements, use prefixes before the hyphen to indicate a custom "namespace".
- Custom elements that use unconventional names can be hard understand. Try to stay close to standard HTML tag names.
- Don't raise exceptions from custom elements when for similar errors the native DOM itself would ignore and continue.
- Configuration and state should be exposed in the logical DOM, not hidden in Shadow DOM.
- Try to make your component self-contained without reliance on external frameworks. This makes it easy for others to reuse your component.
More best practices are given at Google Developers site with illustrative examples.
How can I use Web Components with frontend frameworks or libraries?
Web Components are set to change the way we build web apps but they need not replace frontend frameworks or libraries. The two can complement each other. For example, React can be used in Web Components or vice versa. Whereas React keeps DOM in sync with data, Web Components encapsulate reusable components well.
Use Shadow DOM to avoid conflict with frameworks that manage DOM updates and rendering. Also, VirtualDOM Abstraction Layer (VAL) gives better control over DOM along with any virtual DOM such as React or Preact.
To convert Web Components to first-class React components, react-integration can be used. Angular Elements offers custom elements but these currently have dependence on the Angular framework.
Developers who wish to develop components that can be used across any framework can look at Ionic's Stencil, SlimJS or SkakeJS. It's been said that SkateJS enables the use of React's JSX with Web Components. For data bindings, Observables and ES6 Proxies may play well with Web Components.
In passing, we mention that Accelerated Mobile Pages (AMP) are in fact built from Web Components and are incredibly performant.
What's the current state of and browser support for Web Components?
Browser support for Web Components as on May 2021. Source: WebComponents.org 2021.
Latest status of browser support for Web Components is available on Can I Use site. Chrome and Opera offer the best support for Web Components. Browsers that don't have full native support, can use polyfills. A polyfill is a substitute implementation that a developer can use or import into a codebase until browsers natively start supporting that feature or technology. Web Components polyfills are available on GitHub.
Developers can build custom components on their own. For faster development, they can also reuse components developed and shared by others as component libraries. WebComponents.org lists 1500+ reusable elements as on June 2018. Developers can also adopt component frameworks that simplify the development process. Examples of such frameworks include Google Polymer, Mozilla X-Tag and Bosonic.
In terms of W3C standardization, <template> element is specified within the HTML 5.2 W3C Recommendation. Shadow DOM is specified in the DOM document. Web Components Current Status page summarizes the status.

Milestones

1998

Microsoft creates HTML Components (HTC) to extend the DOM with new attributes. It relies on JScript and VBScript and Microsoft ActiveX is required. In 2011, this is discontinued and deprecated on IE10.

2001

Mozilla introduces XML Binding Language (XBL). The idea is to extend default tags with custom behaviour. XBL2 comes out in 2007. While the intention is good, implementations are not. This is eventually abandoned in 2012.

2010

From the failure of vendor-oriented approaches, comes the idea of frameworks or libraries that can offer custom elements in a cross-browser compatible manner. In 2010, AngularJS is released. Likewise, React is born in 2011 and is used internally by Facebook.

2011

At the Fronteers 2011 conference, Alex Russell gives a talk titled "Web Components and Model Driven Views". He explains how JS frameworks are trying to do what HTML is supposed to do. He then outlines scoped CSS, custom elements and web components.

May
2012

W3C publishes a working draft titled "Introduction to Web Components".

2014

Google Chrome and Opera browsers start supporting v0 of Web Components. In 2016, the same browsers start supporting v1 of Web Components.

Sample Code

// Source: Chamla 2017.
 
/**
 * Here, we create a ES6 class which backs our <employee-presentation> tag, 
 * lets call it EmployeePresentationElement (you could call it as you want !)
 *
 * It extends HTMLElement which already holds several methods and callbacks
 */
class EmployeePresentationElement extends HTMLElement {
	// We have to declare a custom constructor
  constructor() {
  	// First, call super() to be sure everything was made alright
    super()
 
    // Then we can take care of our attributes 
    const position = this.getAttribute('job-position')
    const fullName = this.getAttribute('full-name')
    const avatar = {
      service: this.getAttribute('avatar-service'),
      user: this.getAttribute('avatar-user')
    }
    const avatarUrl = `https://avatars.io/${avatar.service}/${avatar.user}`
 
  	// Let's declare a Shadow DOM within our tag and our rendering will be done IN the Shadow DOM 
  	const shadow = this.attachShadow({mode: 'open'});
 
    // Let's find our template tag and extract the content from it
    const template = document.querySelector('#employee-presentation-template')
    // In order to activate this markup, we have to import it to the document and later to append it to the shadow DOM
    const content = document.importNode(template.content, true);
 
    content.querySelector('h3').textContent = fullName
    content.querySelector('img').src = avatarUrl
    content.querySelector('small').textContent = position
 
  	// Finaly, we can render the real DOM behind our custom tag
    shadow.appendChild(content)
  }
}
 
// We have to register our custom tag to window.customElements which lists all the custom tags we have.
window.customElements.define('employee-presentation', EmployeePresentationElement)

<h3>This is our employees list !</h3>
 
<employee-presentation avatar-service="twitter" avatar-user="LiiorC" full-name="Lior Chamla" job-position="Developer">
</employee-presentation>
 
<template id="employee-presentation-template">
  <style>
    h3 {
      color: navy;
    }
 
    img {
      max-width: 150px;
      border-radius: 50%;
      box-shadow: 0px 3px 5px rgba(0,0,0, 0.5);
      display: block;
    }
 
  </style>
  <h3></h3>
  <img src="" alt="" />
  <small></small>
</template>

/* This will not affect the CSS within local scope of the template */
h3 {
  color: red;
}

References

Article Stats

1367

Words

Authors

Edits

Chats

Likes

14K

Hits

Cite As

Devopedia. 2022. "Web Components." Version 7, February 15. Accessed 2024-06-25. https://devopedia.org/web-components

Contributed by
4 authors

Last updated on
2022-02-15 11:49:34

web languages standardization javascript html5

Shadow DOM
Polymer (Library)
Polyfill
Material Design
CSS Modules
Accelerated Mobile Pages

Web Components

Discussion

Milestones

Sample Code

References

Further Reading

Article Stats

Author-wise Stats for Article Edits

Cite As

See Also

Login