Location>code7788 >text

Define your own web components with Web Component

Popularity：364 ℃/2024-08-13 10:16:04

What is Web Component

Web Component is a set of technologies and specifications for web browsers that enable developers to customize their own HTML elements

come from (a place)MDNThe description:

Web Components are a different set of technologies that allow you to create reusable custom elements (whose functionality is encapsulated outside of your code) and use them in your web applications.

Web Component consists of three technologies:

  • Custom element: Create a custom element and customize its behavior.

  • Shadow DOM: encapsulates several elements into a separate DOM and presents them separately from the main document DOM without affecting each other.

  • HTML template (HTML template): used to define reusable HTML, the use of templates in HTML similar to front-end frameworks (such as Vue), once the definition of reusable code, involving two HTML tags: $<$template$>$ and $<$slot$>$

Without further ado, let's get a quick start with a custom one GitHub tag

Quick Start

Creating HTML templates declaratively

It's similar to the usual HTML, with the only difference being that it's wrapped in $<$template$>$:

<template >
	<a href="/martixjohn" style="display: block; width: 100%; height: 100%" target="_blank">
		<svg style="width: 100%; height: 100%"  aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" height="32">
			<path fill="currentColor"
					d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z">
			</path>
		</svg>
	</a>
	<style>
		a {
			display: block;
		}
		a > svg {
			color: #333;
			transition: all .3s;
		}
		a:hover > svg{
			color: #000;
			filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.2));
		}
	</style>
</template>

What's essentially here is a hyperlink wrapped around an SVG graphic that is our GitHub icon.

You probably found it:

  • templateThe label containsidThis is for subsequent use of JavaScript to refer to it and define the element.

  • Here astyletags and written CSS styles, even before specifying a className or id for the element, one might ask if this would result in a conflict with the page.

    The answer.will not (act, happen etc)The styles here are confined within this template and are isolated from the external DOM.

Defining and registering our elements using the JavaScript API

// ()
(
// Element name, must be a Kebab case name.
// The purpose is to refer to it on the page as <github-icon /> to reference
"github-icon".
// Define the class, which needs to inherit from HTMLElement
class extends HTMLElement {
// Constructor
constructor() {
// Must call the parent constructor
super();

// Get the template template defined in the previous step
let template = ("template_github_icon"); // Get the template content.
// Get the content of the template
let templateContent = ;

// Get the root of the shadow DOM tree for this element.
const shadowRoot = ({ mode: "open" });

// Clone and append the template's content to shadowRoot, the
(
// The cloneNode parameter true means that the root can be accessed externally via JavaScript in the future.
(true)
);
}
}
);

In fact, in the first step, instead of creating a "template" in HTML, you can customize the creation process of the element in JS in the class constructor

Using custom elements

HTML page using the

You can use them in exactly the same way as normal elements, and you can even add attributes to them.

<github-icon style="width: 40px; height: 40px;"></github-icon>

Created within JavaScript

is also created in the same way as a normal element

const element = ('github-icon');
// =xxx

summarize

The above demonstrates how to customize elements and use them in a page.

Web Component is flexible and powerful in more ways than one, you can even:

  • Use slot slots similar to those in Vue to replace parts of the code that are not identical

  • Use existing elements as a master to expand

  • Customized Life Cycle Functions

  • Responding to property changes

  • ...

If you notice carefully, the GitHub icon used on this blog page is none other than a custom element.

consultation

  • /zh-CN/docs/Web/API/Web_components
<Previous Next>