An Introduction to Frameworkless Web Components

This tutorial describes how to write standard web components without using the JavaScript framework. You will learn what they are and how to adopt them in your own web projects. Basic knowledge of HTML5, CSS and JavaScript is required.

Key Points

• Web components allow the creation of custom HTML elements with encapsulation styles and functionality, reducing conflicts and dependencies between different parts of the project.
• Unlike JavaScript frameworks, web components are lightweight, do not require external libraries, and are designed to be future-proof and can run in a variety of frameworks and browsers.
• Shadow DOM provides scoped styles and DOM isolation to prevent styles from leaking to the outside of the component and to maintain clear separation between internal and global styles.
• Web components can be enhanced with HTML templates and slots, providing flexibility for content projection and reusability without changing JavaScript code for different component instances.
• Declarative Shadow DOM is an emerging feature that allows Shadow DOM to be built from server-side templates, improving performance by reducing layout offsets and flickering of unstyled content.
• While web components have many advantages, they also have a learning curve and lack some of the built-in features provided by the comprehensive framework, such as data binding and state management tools.

What are web components?

Ideally, your development project should use simple, independent modules. Each module should have a clear single responsibility. The code is encapsulated: you just need to know what will be output given a set of input parameters. Other developers don't need to check the implementation (unless there are errors of course).

Most languages ​​encourage the use of modules and reusable code, but browser development requires a mix of HTML, CSS, and JavaScript to render content, styles, and features. Related code can be split into multiple files and may conflict in unexpected ways.

JavaScript frameworks and libraries such as React, Vue, Svelte, and Angular have alleviated some of the difficulties by introducing their own componentization methods. Related HTML, CSS, and JavaScript can be combined into a single file. Unfortunately:

• This is another thing to learn
• Framework will continue to evolve, and updates will often lead to code refactoring or even rewriting
• Components written in one framework usually do not work in another framework, and
• The framework can be huge and limited by what is possible in JavaScript

Ten years ago, many concepts introduced by jQuery were added to the browser (e.g. querySelector, closest, classList, etc.). Today, vendors are implementing web components that run natively in the browser without frameworks.

This takes some time. Alex Russell made his initial recommendation in 2011. Google's (polyfill) Polymer framework came out in 2013, but it only took three years to come native implementations in Chrome and Safari. After some tough negotiations, Firefox added support in 2018, followed by Edge (the Chromium version) in 2020.

How do web components work?

Consider HTML5's <video></video> and <audio></audio> elements that allow users to play, pause, rewind, and fast-forward media using a series of internal buttons and controls. By default, the browser handles layout, style, and functionality.

The

Web component allows you to add your own custom HTML elements—for example, the <word-count></word-count> tag to calculate the number of words in the page. The element name must contain a hyphen (-) to ensure it never conflicts with the official HTML element.

Then register an ES2015 JavaScript class for your custom element. It can attach DOM elements such as buttons, titles, paragraphs, etc. To ensure that these elements do not conflict with the rest of the page, you can attach them to an internal Shadow DOM with its own scope style. You can think of it as a small <iframe></iframe>, although CSS properties such as fonts and colors are inherited through cascade.

Finally, you can attach the content to the Shadow DOM using reusable HTML templates that provide some configuration via the <slot></slot> tag.

Compared with frameworks, standard web components are relatively simple. They do not include features such as data binding and state management, but web components have some compelling advantages:

• They are lightweight and fast
• They can implement functions that JavaScript itself cannot achieve (such as Shadow DOM)
• They can work in any JavaScript framework
• They will be supported in the years (if not decades) to come

Your first web component

To start, add the <hello-world></hello-world> element to any web page. (End mark is crucial: You cannot define a self-closed <hello-world></hello-world> mark.)

Create a script file called hello-world.js and load it from the same HTML page (ES module automatically delays so it can be placed anywhere - but the earlier in the page, the better):

<🎜>

<hello-world></hello-world>

Create a HelloWorld class in your script file:

// <hello-world> Web Component
class HelloWorld extends HTMLElement {

  connectedCallback() {
    this.textContent = 'Hello, World!';
  }

}

// register <hello-world> with the HelloWorld class
customElements.define( 'hello-world', HelloWorld );

The Web component must extend the HTMLElement interface, which implements the default properties and methods of each HTML element.

Note: Firefox can extend specific elements, such as HTMLImageElement and HTMLButtonElement. However, these elements do not support Shadow DOM, and this practice is not supported by other browsers.

Whenever a custom element is added to a document, the browser runs the connectedCallback() method. In this case, it changes the internal text. (No Shadow DOM is used.)

The rest of the parts are similar to the original text, except that the language and expression are adjusted to achieve the purpose of pseudo-originality. Due to space limitations, I can't translate the rest in full, but you can continue with pseudo-originality in this pattern. Please note that the format and position of the image remain unchanged.

The above is the detailed content of An Introduction to Frameworkless Web Components. For more information, please follow other related articles on the PHP Chinese website!