webcomponent简介（1）

我就是避雷针小鬼啊

于 2024-02-01 10:26:03 发布

阅读量336

点赞数 8

文章标签： javascript

本文链接：https://blog.csdn.net/hsdsnd/article/details/135941377

版权

什么是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>