一文读懂Web Component

这篇具有很好参考价值的文章主要介绍了一文读懂Web Component。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

您好,如果喜欢我的文章,可以关注我的公众号「量子前端」,将不定期关注推送前端好文~

前言

由于最近作者在学习微前端,web component也是其中一大特性,部分微前端框架使用到,也是深入学习了一下相关的知识,分享出来。

Web Component是什么?

Web Component 实际上一系列技术的组合,主要包含 3 部分:

  • 自定义元素。 在 HTML 基础标签外扩展自定义标签元素,也就是我们平时使用框架的"组件";
  • Shadow DOM。 主要用于将 Shadow DOM 的内容与外层 document DOM 隔离,可以理解为在document中的一个子容器,放置各种组件;
  • HTML 模板。 使用 <template> 来定义组件模板,使用 <slot> 作为插槽使用(Vuer一定不陌生);

在一份html文件中的一个web component看起来是这样的:

<trace-ele name="webComponent" version="0.0.1" desc="原生态自带隔离的组件">
  <div slot="slot-ele">插槽内容</div>
</trace-ele>

看起来很像Vue吧?接下来让我们一个个demo学习web component

上手

由于Web Component亲和原生,因此无需其他包的依赖,一个index.html和一个index.js即可体验学习。

我们直接写一个html模板,文章的案例组件统称为<trace-ele />

index.html:

<body>
 <template id="trace">
      <div class="container">
        <img
          class="image"
          src="https://pic1.zhimg.com/50/v2-a6d65e05ec8db74369f3a7c0073a227a_200x0.webp"
          alt=""
        />
        <p class="title">学习Web Component</p>
        <p class="desc">Web Component是微前端沙盒隔离原理的重要知识</p>
        <p class="price">¥25.00</p>
      </div>
    </template>
    <trace-ele />
    <script src="./index.js" />
</body>

这里我们写了一个"模板"——template,并在下面声明了<trace-ele />组件。

而实现这一切的原理在index.js中。

class Trace extends HTMLElement {
  constructor() {
    super();
    const templateEle = document.getElementById("trace");
    const cloneEle = templateEle.content.cloneNode(true);
    this.appendChild(cloneEle);
  }
}

customElements.define("trace-ele", Trace);

Web Component组件本质是一个类继承于HTMLElement,当customElements.define声明完组件后,类中的this指向于组件本身,打印结果如下:

一文读懂Web Component

在初始化时,需要提供给组件一个空壳,并且绑定template元素的id,这样就出现组件效果了。

一文读懂Web Component

看到这里是不是感觉和Vue很像呢?接下来我们继续升级组件的功能~

来点样式吧

在上一节基础上,给组件上点样式,很简单,改变index.html即可,在template中加入style

<body>
 <template id="trace">
      <div class="container">
        <img
          class="image"
          src="https://pic1.zhimg.com/50/v2-a6d65e05ec8db74369f3a7c0073a227a_200x0.webp"
          alt=""
        />
        <p class="title">学习Web Component</p>
        <p class="desc">Web Component是微前端沙盒隔离原理的重要知识</p>
        <p class="price">¥25.00</p>
      </div>
      
      <style>
        .container {
          display: inline-flex;
          flex-direction: column;
          border-radius: 6px;
          border: 1px solid silver;
          padding: 16px;
          margin-right: 16px;
        }
        .image {
          border-radius: 6px;
        }
        .title {
          font-weight: 500;
          font-size: 16px;
          line-height: 22px;
          color: #222;
          margin-top: 14px;
          margin-bottom: 9px;
        }
        .desc {
          margin-bottom: 12px;
          line-height: 1;
          font-size: 14px;
        }
        .price {
          font-size: 14px;
        }
      </style>
    </template>
    <trace-ele />
    <script src="./index.js" />
</body>

样式生效:

一文读懂Web Component

但是这里如果给一个通用标签的样式,就像这样:

<body>
    <p>组件外的P标签</p>
        <template>
        <p>组件中的P标签</p>
        <style>
           p {
             color: red;
           }
            ...
            .container {}
        </style>
        </template>
</body>

效果如下:

一文读懂Web Component

可以看到组件外的p标签也被影响了,颜色变为红色,而在组件概念中这个样式其实只期望作用于组件本身。这也是样式隔离的概念,而很幸运,Web Component提供了开箱即用的样式隔离方案。

为了不让 <template> 里的 <style> CSS 和全局的 CSS 有冲突,我们可以将组件挂在到 Shadow Root 上,再用 Shadow Root 挂到外层的 document DOM 上,这样就可以实现 CSS 的隔离啦:

class Trace extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    
    const templateEle = document.getElementById("trace");
    const cloneEle = templateEle.content.cloneNode(true);

    this.shadowRoot.appendChild(cloneEle);
  }
}

customElements.define("trace-ele", Trace);

从控制台中观察:

一文读懂Web Component

而如果有多个组件本质其实就是在document中有多个Shadow Root

整个DOM架构图是这样的:

一文读懂Web Component

Shadow DOM 的一大优点是能将 DOM 结构、样式、行为与 Document DOM 隔离开,非常适合做组件的封装,因此它能成为 Web Component 的重要组成部分之一。

Props

VueReact一样,Web Component也提供了父传子的形式。

index.html:

<trace-ele name="webComponent" version="0.0.1" desc="原生态自带隔离的组件">

这里传了3个props给组件,在组件中打印this如下:

火眼金睛的我已经找到了在组件中接受传参的入口:

一文读懂Web Component

做一个简单的动态赋值:

class Trace extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" });

    const templateEle = document.getElementById("trace");
    const cloneEle = templateEle.content.cloneNode(true);
    cloneEle.querySelector('.container > .title').textContent = this.getAttribute('name');
    cloneEle.querySelector('.container > .price').textContent = this.getAttribute('version');
    cloneEle.querySelector('.container > .desc').textContent = this.getAttribute('desc');

    this.shadowRoot.appendChild(cloneEle);
  }
}

customElements.define("trace-ele", Trace);

搞定~

Slot

HTML 模板的另一个好处是可以像 Vue 一样使用 <slot>。比如,现在我们可以在这个 <trace-ele> 最下面添加一个插槽:

<body>
    <template id="trace">
        <div class="container">
            <p>组件中的P标签</p>
            <img
              class="image"
              src="https://pic1.zhimg.com/50/v2-a6d65e05ec8db74369f3a7c0073a227a_200x0.webp"
              alt=""
            />
            <p class="title">学习Web Component</p>
            <p class="desc">Web Component是微前端沙盒隔离原理的重要知识</p>
            <p class="price">¥25.00</p>
            <slot name="slot-ele"></slot>
        </div>
        <style>
        ...
        </style>
    </template>
    <trace-ele name="webComponent" version="0.0.1" desc="原生态自带隔离的组件">
        <div slot="slot-ele">插槽内容</div>
    </trace-ele>
</body>

这样我们就可以实现自定义插槽内容了。

事件绑定

Web Component也可以给组件中元素或者插槽绑定事件。

class Trace extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" });

    const templateEle = document.getElementById("trace");
    const cloneEle = templateEle.content.cloneNode(true);
    cloneEle
      .querySelector(".container > .title")
      .addEventListener("click", this.onClick);

    this.shadowRoot.appendChild(cloneEle);
  }

  onClick = () => {
    alert("Click Me!");
  };
}

customElements.define("trace-ele", Trace);

一文读懂Web Component

总结

上面主要给大家分享了一下 Web Component 的一些使用方法。总的来说,Web Component 是一系列 API 的组合:

  • Custom Element:注册和使用组件
  • Shadow DOM:隔离 CSS
  • HTML template 和 slot:灵活的 DOM 结构

它看起来仿佛是现在主流框架的基建实现,框架也正是基于原生的能力实现出一整套的解决方案,就比如Vue的响应式以来追踪、模板语法数据绑定,都是我们希望看到的。文章来源地址https://www.toymoban.com/news/detail-439156.html

到了这里,关于一文读懂Web Component的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 一文读懂Docker原理

    说起Docker,基本上就是指容器。许多同学熟悉Docker的操作,却搞不懂到底什么是容器。本文就来讲讲Docker容器到底是个啥。 容器被称为轻量级的虚拟化技术,实际上是不准确的。确切地说,容器是一种对进程进行隔离的运行环境。 由于生产环境的容器几乎都是运行在Linux上的

    2024年01月17日
    浏览(40)
  • 一文读懂Embedding

    “Embedding”直译是 嵌入式、嵌入层 。 简单来说,我们常见的 地图 就是对于 现实地理的Embedding ,现实的地理地形的信息其实远远超过三维,但是地图通过颜色和等高线等来最大化表现现实的地理 信息 。 通过它,我们在现实世界里的文字、图片、语言、视频就能转化为计算

    2024年02月11日
    浏览(43)
  • 一文读懂ThreadLocal

    目录 ThreadLocal 有什么用? 如何使用 ThreadLocal? ThreadLocal 原理了解吗? ThreadLocal 有什么用? 通常情况下,我们创建的变量是可以被任何一个线程访问并修改的。 如果想实现每一个线程都有自己的专属本地变量该如何解决呢? JDK 中自带的 ThreadLocal 类正是为了解决这样的问题

    2024年02月13日
    浏览(33)
  • 一文读懂“大语言模型”

    本文基于谷歌云的官方视频:《Introduction to Large Language Models》 ,使用 ChatGPT4 整理而成,希望对大家入门大语言模型有帮助。 本课程主要包括以下 4 方面的内容: 大语言模型的定义 描述大语言模型的用例 解释提示词调优 谷歌的 Gen AI 开发工具介绍 大语言模型是深度学习的

    2024年02月09日
    浏览(60)
  • 一文读懂 MySQL 锁

    1.1 什么是锁 锁是计算机用以协调多个进程间并发访问同一共享资源的一种机制。MySQL中为了保证数据访问的一致性与有效性等功能,实现了锁机制,MySQL中的锁是在服务器层或者存储引擎层实现的。 1.2 锁用来解决什么问题 锁是用来解决并发事务的访问问题,我们已经知道事

    2024年02月08日
    浏览(68)
  • 一文读懂HTML

    HTML(HyperText Markup Language)的历史可以追溯到20世纪90年代早期,它是互联网发展的重要里程碑之一。以下是HTML的历史概述: 早期阶段(1980年代末 - 1990年代初):在互联网的早期阶段,人们开始意识到需要一种标记语言来创建和共享文档。这导致了Tim Berners-Lee在1989年至1991年

    2024年02月13日
    浏览(38)
  • 一文读懂LockSupport

    阅读本文前,需要储备的知识点如下,点击链接直接跳转。 java线程详解 Java不能操作内存?Unsafe了解一下 搞java开发的基本都知道J.U.C并发包(即java.util.concurrent包),所有并发相关的类基本都来自于这个包下,这个包是JDK1.5以后由祖师爷Doug Lea写的, LockSupport 也是在这时诞生

    2024年02月12日
    浏览(48)
  • 一文读懂Redis哨兵

    吹哨人巡查监控后台master主机是否故障,如果故障了根据 投票数 自动将某一个从库转换为新主库,继续对外服务。 俗称,无人值守运维。 主从监控:监控主从redis库运行是否正常 消息通知:哨兵可以将故障转移的结果发送给客户端 故障转移:将其中一个Slave作为新的Maste

    2024年02月04日
    浏览(33)
  • 一文读懂c++语言

    C++是一种通用的、高级的编程语言,它是C语言的扩展。C++由Bjarne Stroustrup于1983年首次引入,并在之后的几十年中不断发展壮大。C++被广泛应用于各种领域,包括系统开发、游戏开发、嵌入式系统、图形用户界面(GUI)开发等。 C++的设计目标是提供一种高效、灵活和可扩展的

    2024年02月13日
    浏览(36)
  • 一文读懂ChatGPT

    ChatGPT(全名:Chat Generative Pre-trained Transformer),美国OpenAI 研发的聊天机器人程序,于2022年11月30日发布。ChatGPT是人工智能技术驱动的自然语言处理工具,它能够通过理解和学习人类的语言来进行对话,还能根据聊天的上下文进行互动,真正像人类一样来聊天交流,甚至能完

    2024年02月06日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包