百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

Web Components系列(三)——创建 Custom Elements

xsobi 2024-11-26 10:15 1 浏览

前言

根据前面的介绍，我们知道根据是否继承基本 HTML 元素，可以将自定义元素分为两类“

  • Autonomous custom elements 自主定制元素
  • Customized built-in elements 自定义内置元素

由此产生了一个疑问：这两者在使用上到底有何区别？

且让我通过本篇文章试着解释一下这个问题。

Autonomous custom elements

自主定制元素，是独立的元素，它不继承其他内建的 HTML 元素。

你可以直接把它们写成HTML标签的形式，来在页面上使用。例如 <my-card>，或者是document.createElement("my-card")这样。

示例

下面是一个创建和使用 Autonomous custom elements 的例子：

<!-- index.html -->
<body>
    <my-card></my-card>
    <script src="./index.js"></script>
</body>

// index.js
class MyCard extends HTMLElement {
    constructor() {
        super();
        let shadow = this.attachShadow({ mode: "open" });

        let containerEle = document.createElement("div");
        containerEle.style.display = "flex";
        containerEle.style.flexDirection = "column"
        containerEle.style.margin = "100px";
        containerEle.style.border = "1px solid #aaa";

        const headerEle = document.createElement("div");
        headerEle.innerText = "名片";
        headerEle.style.height = "20px";
        headerEle.style.padding = "10px";
        headerEle.style.borderBottom = "1px solid blue";

        const bodyEle = document.createElement("div");
        bodyEle.innerText = "姓名：编程三昧";
        bodyEle.style.padding = "10px";

        containerEle.appendChild(headerEle);
        containerEle.appendChild(bodyEle);
        shadow.appendChild(containerEle);
    }
}

customElements.define("my-card", MyCard);

其效果如下：

打开开发者工具，查看 DOM 结构，如下图所示：

尝试一

然后，我试着将注册接口传参改为 customElements.define("my-card", MyCard, {extends: "p"});，结果，页面不显示，也无任何报错信息。

尝试二

如果将 MyCard 类改为继承自 HTMLDivElement，即：

// index.js
class MyCard extends HTMLDivElement{
	constructor(){
		super();
		……
	}
}
……

页面有报错：

尝试三

在自定义元素的构造器的结束部分加入以下代码：

this.style.display = "block";
this.style.border = "2px solid #aaa";

边框添加成功，这里要注意的是：继承自 HTMLElement 的样式 display 置为 inline，如果不重新设置 display 的值，那么样式效果会显示不出来。

Customized built-in elements

继承自基本的HTML元素。在创建时，你必须指定所需扩展的元素，使用时，需要先写出基本的元素标签，并通过 is 属性指定custom element的名称。例如<p is="my-card">, 或者 document.createElement("p", { is: "my-card" })。

示例

下面是一个使用 Customized built-in elements 的例子：

<!--index.html-->

<body>
    <div is="my-card"></div>
    <script src="./index.js"></script>
</body>

// index.js

class MyCard extends HTMLDivElement {
    constructor() {
        super();
        let shadow = this.attachShadow({ mode: "open" });

        let containerEle = document.createElement("div");
        containerEle.style.display = "flex";
        containerEle.style.flexDirection = "column"
        containerEle.style.margin = "100px";
        containerEle.style.border = "1px solid #aaa";

        const headerEle = document.createElement("div");
        headerEle.innerText = "名片";
        headerEle.style.height = "20px";
        headerEle.style.padding = "10px";
        headerEle.style.borderBottom = "1px solid blue";

        const bodyEle = document.createElement("div");
        bodyEle.innerText = "姓名：编程三昧";
        bodyEle.style.padding = "10px";

        containerEle.appendChild(headerEle);
        containerEle.appendChild(bodyEle);
        shadow.appendChild(containerEle);
    }
}

customElements.define("my-card", MyCard, {extends: "div"});

效果跟 Autonomous custom elements 效果相同，其 DOM 结构如下：

尝试一

如果在 index.html 中只使用 my-card 标签，则没有任何显示。

尝试二

如果将父类中的 HTMLDivElement 改为 HTMLElement，页面有报错：

尝试三

如果去掉 customElements.define() 的第三个参数，则无报错也无页面显示。

总结

综合上述，可以总结如下：

  • Autonomous custom elements 的构造函数只能继承 HTMLElement，且调用 customElements.define() 方法时不需要第三个参数；
  • HTML 中直接使用 Autonomous custom elements 定义的标签名称即可；
  • Autonomous custom elements 样式的 display 值默认为 inline，如有需要，可重新设置；
  • Customized built-in elements 的构造函数一般只能继承可用的基本 HTML 标签类，且调用 customElements.define() 方法时必须要传入第三个参数，第三个参数一般为： {extends: "标签名"}；
  • HTML 中直接使用 Customized built-in elements 时，需要通过组件构造函数继承类的基本标签名 + is="自定义标签名"。

~

~ 本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

相关推荐

好用的云函数!后端低代码接口开发，零基础编写API接口

前言在开发项目过程中，经常需要用到API接口，实现对数据库的CURD等操作。不管你是专业的PHP开发工程师，还是客户端开发工程师，或者是不懂编程但懂得数据库SQL查询，又或者是完全不太懂技术的人，通过...

快速上手:Windows 平台上 cURL 命令的使用方法

在工作流程中，为了快速验证API接口有效性，团队成员经常转向直接执行cURL命令的方法。这种做法不仅节省时间，而且促进了团队效率的提升。对于使用Windows系统的用户来说，这里有一套详细...

使用 Golang net/http 包:基础入门与实战

简介Go的net/http包是构建HTTP服务的核心库，功能强大且易于使用。它提供了基本的HTTP客户端和服务端支持，可以快速构建RESTAPI、Web应用等服务。本文将介绍ne...

#小白接口# 使用云函数，人人都能编写和发布自己的API接口

你只需编写简单的云函数，就可以实现自己的业务逻辑，发布后就可以生成自己的接口给客户端调用。果创云支持对云函数进行在线接口编程，进入开放平台我的接口-在线接口编程，设计一个新接口，设计和配置好接口参...

极度精神分裂:我家没有墙面开关，但我虚拟出来了一系列开关

本内容来源于@什么值得买APP，观点仅代表作者本人｜作者：iN在之前和大家说过，在iN的家里是没有墙面开关的。...

window使用curl命令的注意事项 curl命令用法

cmd-使用curl命令的注意点前言最近在cmd中使用curl命令来测试restapi,发现有不少问题,这里记录一下。在cmd中使用curl命令的注意事项json不能由单引号包括起来json...

Linux 系统curl命令使用详解 linuxctrl

curl是一个强大的命令行工具，用于在Linux系统中进行数据传输。它支持多种协议，包括HTTP、HTTPS、FTP等，用于下载或上传数据，执行Web请求等。curl命令的常见用法和解...

Tornado 入门:初学者指南 tornados

Tornado是一个功能强大的PythonWeb框架和异步网络库。它最初是为了处理实时Web服务中的数千个同时连接而开发的。它独特的Web服务器和框架功能组合使其成为开发高性能Web...

PHP Curl的简单使用 php curl formdata

本文写给刚入PHP坑不久的新手们，作为工具文档，方便用时查阅。CURL是一个非常强大的开源库，它支持很多种协议，例如，HTTP、HTTPS、FTP、TELENT等。日常开发中，我们经常会需要用到cur...

Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介

本章涵盖使用Actix提供静态网页...

我给 Apache 顶级项目提了个 Bug apache顶级项目有哪些

这篇文章记录了给Apache顶级项目-分库分表中间件ShardingSphere提交Bug的历程。说实话，这是一次比较曲折的Bug跟踪之旅。10月28日，我们在GitHub上提...

linux文件下载、服务器交互(curl)

基础环境curl命令描述...

curl简单使用 curl sh

1.curl--help#查看关键字2.curl-A“（添加user-agent<name>SendUser-Agent<name>toserver）”...

常用linux命令:curl 常用linux命令大全

//获取网页内容//不加任何选项使用curl时，默认会发送GET请求来获取内容到标准输出$curlhttp://www.baidu.com//输出<!DOCTYPEh...

三十七，Web渗透提高班之hack the box在线靶场注册及入门知识

一.注册hacktheboxHackTheBox是一个在线平台，允许测试您的渗透技能和代码，并与其他类似兴趣的成员交流想法和方法。它包含一些不断更新的挑战，并且模拟真实场景，其风格更倾向于CT...

一周热门
最近发表
标签列表