Personal tools
 

Web Components

Rice University_083021B
[Rice University]

     

    - Overview

    Web Components comprise a set of standardized web platform APIs designed to facilitate the creation of custom, reusable, and encapsulated HTML elements. These components function similarly to native HTML elements within web pages and applications. 

    The core technologies underpinning Web Components include:

    • Custom Elements: This API allows developers to define new HTML elements and specify their behavior using JavaScript. This enables the extension of existing HTML elements or the creation of entirely new elements with unique functionalities, such as a <my-carousel> element for image slideshows.
    • Shadow DOM: Shadow DOM provides encapsulation for an element's internal structure and styling. It creates a separate, isolated DOM tree (the "shadow tree") within a custom element, preventing styles and scripts from leaking out and affecting other parts of the document, and vice versa. This ensures that the component's internal implementation remains independent of the surrounding page.
    • HTML Templates: The <template> and <slot> elements allow for the creation of reusable HTML fragments that are not rendered by default. These templates can be instantiated and added to the DOM using JavaScript, serving as a blueprint for the structure of custom elements. This mechanism promotes efficient rendering and reusability of component structures.

     

    - The Purpose of Web Components

    Web components are a way to create encapsulated, single-responsibility blocks of code that can be reused on any page. Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML markup for use in web pages and web applications. Custom components and widgets are built on the Web components standard, work across modern browsers, and work with any JavaScript library or framework that supports HTML.

    Web components are based on existing web standards. Support for web components is currently being added to the HTML and DOM specifications, allowing web developers to easily extend HTML with new elements with encapsulated styles and custom behavior.

    Consider the HTML <video> tag. Given a URL, viewers can use controls such as play, pause, rewind, fast forward, and adjust volume. 

    Styling and functionality are provided, but you can modify them using various properties and JavaScript API calls. Any number of <video> elements can be placed inside other tags, they will not conflict.

    What if you need your own custom functionality? For example, an element that shows the word count of the page? No HTML <wordcount> tag (yet).

    Frameworks such as React and Vue.js allow developers to create web components where content, styling, and functionality can be defined in a single JavaScript file. These solve many complex programming problems, but keep in mind:

    • You have to learn how to use the framework and update your code as it evolves.
    • Components written for one framework are rarely compatible with another.
    • Frameworks rise and fall in popularity. You become dependent on the whims and priorities of the development team and users.
    • Standard web components can add browser features (such as Shadow DOM) that are difficult to achieve with JavaScript alone.

     

    Fortunately, popular concepts introduced in libraries and frameworks often find their way into web standards. It took a while, but the web components are here.

    Applying modular concepts to a single programming language is simple, but web development requires a combination of technologies. 

     

    - Libraries for Building Web Components

    Many libraries already exist to make building web components easier. The library section of the site has more details, but you can try the following:

    • Hybrids is a UI library for creating web components with a simple and functional API.
    • LitElement uses lit-html to render into the element's Shadow DOM and adds an API to help manage element properties and attributes.
    • Polymer provides a set of functions for creating custom elements.
    • Slim.js is an open source lightweight web component library that uses es6 native class inheritance to provide data binding and extension capabilities for components.
    • Stencil is an open source compiler that generates standards-compliant web components.

     

    [More to come ...]


     

     

    Document Actions