乐趣区

关于前端:Web-Components系列三-创建-Custom-Elements

jiezi

前言

依据后面的介绍，咱们晓得依据是否继承根本 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="自定义标签名"。

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

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

退出移动版