每天 React, Vue, 你知道如何原生实现 WebComponent吗？

最新推荐文章于 2024-08-21 09:52:04 发布

傲娇的koala

最新推荐文章于 2024-08-21 09:52:04 发布

阅读量683

点赞数

文章标签： js javascript vue html react

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/xgangzai/article/details/121600949

版权

本文介绍了Web Component技术，包括自定义元素、Shadow DOM和HTML模板，并通过示例展示如何创建和使用组件。同时，深入探讨了组件的生命周期和事件处理，最后提到了一个折叠面板的案例。Web Component与Vue、React组件类似，但在实现上有别，提供了原生封装和复用组件的能力。

摘要由CSDN通过智能技术生成

大厂技术高级前端 Node进阶

点击上方程序员成长指北，关注公众号

回复1，加入高级Node交流群

原文地址：https://juejin.cn/post/7034796986889043999

作者：hpstream_ (感谢小伙伴投稿)

谈到WebComponent 很多人很容易想到Vue,React中的组件。但其实H5原生也已经支持了组件的编写。

查看 Web Components MDN 文档,里面原话如下：

Web Components

Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。Web Components旨在解决这些问题 — 它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。

Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。

Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。

Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
HTML templates（HTML模板）：template 和 slot 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

上面的概念难以理解，我们通过一个例子看下如何编写一个组件；

案例一

什么是 HTML templates（HTML模板）？

<template id="btn">
    <button class="hp-button">
      <slot></slot>
    </button>
  </template>

Custom elements（自定义元素）

class HpButton extends HTMLElement {
      constructor() {
        super();
        //...
        
      }
    }
    // 定义了一个自定义标签 组件
window.customElements.define('hp-button', HpButton)

Shadow DOM（影子DOM）

let shadow = this.attachShadow({
          mode: 'open'
        });
        let btnTmpl = document.getElementById('btn');
        let cloneTemplate = btnTmpl.content.cloneNode(true)
        const style = document.createElement('style');
        let type = this.getAttribute('type') || 'default';
        const btnList = {
          'primary': {
            background: '#ff0000',
            color: '#fff'
          },
          'default': {
            background: '#909399',