什么是webcomponent
1.允许把现有的组件进行封装
2.分而治之
3.重用
shadow Dom的概念
外部不可见,作为一个黑盒,提供一些api,供外界使用
这样外界的因素就无法访问到dom里面的元素
新的标签
作为在vue文件中常用的标签,相比大家都不陌生
新的html5标签
不会被渲染在domtree
新的html5标签
只能在template内
为wc动态的添加child
生命周期
- connectedCallback():每当元素添加到文档中时调用。规范建议开发人员尽可能在此回调中实现自定义元素的设定,而不是在构造函数中实现。
- disconnectedCallback():每当元素从文档中移除时调用。
- adoptedCallback():每当元素被移动到新文档中时调用。
简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<my-paragraph></my-paragraph>
<template id="my-paragraph">
<p>My paragraph</p>
</template>
<script>
// 定义一个自定义元素
class MyComponent extends HTMLElement {
constructor() {
super();
// 创建一个 Shadow DOM 并附加到自定义元素
const templateElem = document.getElementById('my-paragraph');
// 深度克隆模板内容
const template = templateElem.content.cloneNode(true);
// 将模板中的内容附加到自定义元素的 shadow root 中
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(template);
}
// 生命周期示例
connectedCallback() {
console.log("自定义元素添加至页面。");
}
disconnectedCallback() {
console.log("自定义元素从页面中移除。");
}
adoptedCallback() {
console.log("自定义元素移动至新页面。");
}
}
// 注册自定义元素
// 第一个参数是自定义元素的名称,第二个参数是构造函数
customElements.define('my-paragraph', MyComponent);
</script>
</body>
</html>