共计 3180 个字符,预计需要花费 8 分钟才能阅读完成。
前言
依据后面的介绍,咱们晓得依据是否继承根本 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="自定义标签名"
。
~
~ 本文完,感激浏览!
~
学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!