ASCII码 ASCII码

Web Components系列（三） —— 创建 Custom Elements

发布于：2022-02-10 09:59:29  栏目：技术文档

浏览器数据库 IndexedDB.001

前言

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

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

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

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

Autonomous custom elements

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

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

示例

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

  1. <!-- index.html -->
  2. <body>
  3.     <my-card></my-card>
  4.     <script src="./index.js"></script>
  5. </body>
  1. // index.js
  2. class MyCard extends HTMLElement {
  3.     constructor() {
  4.         super();
  5.         let shadow = this.attachShadow({ mode: "open" });
  7.         let containerEle = document.createElement("div");
  8.         containerEle.style.display = "flex";
  9.         containerEle.style.flexDirection = "column"
  10.         containerEle.style.margin = "100px";
  11.         containerEle.style.border = "1px solid #aaa";
  13.         const headerEle = document.createElement("div");
  14.         headerEle.innerText = "名片";
  15.         headerEle.style.height = "20px";
  16.         headerEle.style.padding = "10px";
  17.         headerEle.style.borderBottom = "1px solid blue";
  19.         const bodyEle = document.createElement("div");
  20.         bodyEle.innerText = "姓名：编程三昧";
  21.         bodyEle.style.padding = "10px";
  23.         containerEle.appendChild(headerEle);
  24.         containerEle.appendChild(bodyEle);
  25.         shadow.appendChild(containerEle);
  26.     }
  27. }
  29. customElements.define("my-card", MyCard);

其效果如下：

image-20220208211638861

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

image-20220208212443770

尝试一

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

尝试二

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

  1. // index.js
  2. class MyCard extends HTMLDivElement{
  3.     constructor(){
  4.         super();
  5.         ……
  6.     }
  7. }
  8. ……

页面有报错：

image-20220208214258852

尝试三

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

  1. this.style.display = "block";
  2. 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 的例子：

  1. <!--index.html-->
  3. <body>
  4.     <div is="my-card"></div>
  5.     <script src="./index.js"></script>
  6. </body>
  1. // index.js
  3. class MyCard extends HTMLDivElement {
  4.     constructor() {
  5.         super();
  6.         let shadow = this.attachShadow({ mode: "open" });
  8.         let containerEle = document.createElement("div");
  9.         containerEle.style.display = "flex";
  10.         containerEle.style.flexDirection = "column"
  11.         containerEle.style.margin = "100px";
  12.         containerEle.style.border = "1px solid #aaa";
  14.         const headerEle = document.createElement("div");
  15.         headerEle.innerText = "名片";
  16.         headerEle.style.height = "20px";
  17.         headerEle.style.padding = "10px";
  18.         headerEle.style.borderBottom = "1px solid blue";
  20.         const bodyEle = document.createElement("div");
  21.         bodyEle.innerText = "姓名：编程三昧";
  22.         bodyEle.style.padding = "10px";
  24.         containerEle.appendChild(headerEle);
  25.         containerEle.appendChild(bodyEle);
  26.         shadow.appendChild(containerEle);
  27.     }
  28. }
  30. customElements.define("my-card", MyCard, {extends: "div"});

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

image-20220208213737884

尝试一

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

尝试二

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

image-20220208214645068

尝试三

如果去掉 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="自定义标签名"。

~

~ 本文完，感谢阅读！

~

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

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

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行