使用Web Component定义自己的专属网页组件

cnblogs 2024-08-13 10:41:00 阅读 75

什么是Web Component

Web Component是一套Web浏览器的技术和规范,能够让开发者定制自己的HTML元素

来自MDN的描述:

Web Component 是一套不同的技术,允许你创建可重用的定制元素(它们的功能封装在你的代码之外)并且在你的 web 应用中使用它们。

Web Component由三项技术组成:

    <li>

    Custom element(自定义元素):创建一个自定义元素,并自定义其行为。

  • Shadow DOM(影子 DOM):将若干元素封装成独立的DOM,并且与主文档DOM分开呈现,互不影响。

  • HTML template(HTML 模板):用于定义可重用的HTML,在HTML中使用类似于前端框架(如Vue)中的模板,一次定义可重用代码,涉及到两个HTML标签:<template> 和 <slot>

废话不多说,让我们以一个自定义一个GitHub标签快速入门

快速入门

声明式地创建HTML模板

和往常我们书写HTML类似,唯一不同点便是以<template>包裹:

<code><template >

<a href="https://github.com/martixjohn" target="_blank">code>

<svg aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" height="32">code>

<path fill="currentColor"code>

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">code>

</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>

这里实质上是一个超链接包裹了一个SVG图形,图形是我们的GitHub图标。

你也许发现了:

    <li>

    template标签含有id,这是为了后续使用JavaScript去引用它并定义元素。

  • 这里创建了一个style标签并编写了CSS样式,甚至直接使用元素选择器而没有以一个className或者id去应用样式,有人会问这样会不会导致和页面冲突。

    答案是不会,这里的样式局限于这个模板内部,和外部DOM是隔离的。

使用JavaScript API定义和注册我们的元素

// customElements.define()

customElements.define(

// 元素名,必须是Kebab case命名

// 目的是在页面中以<github-icon />去引用

"github-icon",

// 定义类,需要继承自HTMLElement

class extends HTMLElement {

// 构造器

constructor() {

// 必须调用父级构造

super();

// 获取上一步定义的template模板

let template = document.getElementById("template_github_icon");

// 获取模板内容

let templateContent = template.content;

// 获取本元素的影子DOM树根,mode为true表示以后可以通过JavaScript直接外部访问根节点

const shadowRoot = this.attachShadow({ mode: "open" });

// 将template的内容克隆并附加到shadowRoot,

shadowRoot.appendChild(

// true表示深拷贝

templateContent.cloneNode(true)

);

}

}

);

实际上在第一步你可以不以HTML创建“模板”,而是在类的构造器中以JS自定义元素的创建过程

使用自定义元素

HTML页面上使用

和普通元素使用方式完全相同,你甚至还可以为其添加属性(attribute)

<github-icon ></github-icon>

JavaScript内创建

也和普通元素的创建方式相同

const element = document.createElement('github-icon');

// element.xxx=xxx

总结

以上演示了如何自定义元素,并在页面中使用他们。

Web Component的灵活和强大不止于此,你甚至还可以:

  • 使用类似于Vue中的插槽slot以替换部分不相同的代码

  • 以现有的元素为母版去扩展

  • 自定义生命周期函数

  • 响应属性变化

  • ...

如果你仔细发现的话,本博客页面使用的GitHub图标正是一个自定义元素。

参考

  • Web Component:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components

  • 使用自定义元素:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_custom_elements

  • 使用 shadow DOM:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_shadow_DOM

  • 使用 template 和 slot:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_templates_and_slots



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。