初探Web Components

已于 2022-03-31 10:54:32 修改
阅读量1.3k 收藏
点赞数
分类专栏： js 文章标签： web components js html
于 2022-03-30 16:12:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangqling/article/details/123847278
版权

前言：对于前端来说组件并不会陌生，React和Vue中组件经常被使用，浏览器的原生组件就是Web Components，原生组件相对于框架组件来说更加简单直接，符合直觉，不用加载任何外部模块，代码量小。最近我在做一个谷歌浏览器插件需求时候，发现往页面中插入元素可能会对当前页面产生影响，为了避免这种不必要的影响，我选择使用了自定义组件。

1、自定义组件封装

创建index.js文件，定义一个类继承自HTMLElement，借助template来快速创建元素。

class FoodCard extends HTMLElement {
  constructor() {
    super();
    const templateElem = document.getElementById('myFoodCard');
    const content = templateElem.content.cloneNode(true);
    this.appendChild(content);
  }
}
window.customElements.define('food-card', FoodCard);
2、自定义组件使用

创建index.html文件，直接在html文件中引入自定义标签即可。

<!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>web components</title>
  </head>
  <body>
    <template id="myFoodCard">
      <style>
        section {
          padding: 10px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          flex-direction: row;
        }
        section .left{
          background-color: aquamarine;
          min-width: 20px;
          height: 100%;
        }
        section .right {
          flex: 1;
          padding-left: 10px;
        }
      </style>
      <section>
        <div class="left">图片</div>
        <div class="right">
          <div class="right-top">标题</div>
          <div class="right-bottom">描述</div>
        </div>
      </section>
    </template>
    <food-card/>
    <script src="./index.js"></script>
  </body>
</html>

此时页面可以看到如下内容：
在这里插入图片描述
我们的自定义组件已经可以使用，不过缺少传参。因此，做出如下修改
index.js

class FoodCard extends HTMLElement {
  constructor() {
    super();
    const templateElem = document.getElementById('myFoodCard');
    const content = templateElem.content.cloneNode(true);
    content.querySelector('.image').setAttribute('src', this.getAttribute('src'));
    content.querySelector('.right-top').innerHTML=this.getAttribute('title');
    content.querySelector('.right-bottom').innerHTML=this.getAttribute('description');
    this.appendChild(content);
  }
}
window.customElements.define('food-card', FoodCard);

index.html文件

<!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>web components</title>
  </head>
  <body>
    <template id="myFoodCard">
      <style>
        section {
          padding: 10px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          flex-direction: row;
        }
        section .left{
          min-width: 20px;
          max-width: 200px;
          height: 100%;
          overflow: hidden;
        }
        .left img{
          width: 100%;
        }
        section .right {
          flex: 1;
          padding-left: 10px;
        }
      </style>
      <section>
        <div class="left">
          <img src="" class="image"/>
        </div>
        <div class="right">
          <div class="right-top">标题</div>
          <div class="right-bottom">描述</div>
        </div>
      </section>
    </template>
    <food-card
      src="http://qianlingvip.cn:3300/uploads/2021-05-13-15-13-451546.jpg"
      title="红烧猪蹄"
      description="红烧猪蹄是补充胶原蛋白的不二选择"
    />
    <script src="./index.js"></script>
  </body>
</html>

此时，我们就可以改变属性动态改变自定义组件中的内容了。
在这里插入图片描述

3、Shadow DOM

我们不希望用户能够看到的内部代码，Web Component 允许内部代码隐藏起来，这叫做 Shadow DOM，即这部分 DOM 默认与外部 DOM 隔离，内部任何代码都无法影响外部。

自定义元素的this.attachShadow()方法开启 Shadow DOM，详见下面的代码。

class FoodCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow( { mode: 'closed' } );
    const templateElem = document.getElementById('myFoodCard');
    const content = templateElem.content.cloneNode(true);
    content.querySelector('.image').setAttribute('src', this.getAttribute('src'));
    content.querySelector('.right-top').innerHTML=this.getAttribute('title');
    content.querySelector('.right-bottom').innerHTML=this.getAttribute('description');
    shadow.appendChild(content);
  }
}
window.customElements.define('food-card', FoodCard);

上面代码中，this.attachShadow()方法的参数{ mode: ‘closed’ }，表示 Shadow DOM 是封闭的，不允许外部访问。

至此，这个 Web Component 组件就完成了。

4、事件

在上边基础上如果需要添加一些事件，可以进行如下改造。

class FoodCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow( { mode: 'closed' } );
    const templateElem = document.getElementById('myFoodCard');
    const content = templateElem.content.cloneNode(true);
    const left = content.querySelector('.left');
    content.querySelector('.image').setAttribute('src', this.getAttribute('src'));
    content.querySelector('.right-top').innerHTML=this.getAttribute('title');
    content.querySelector('.right-bottom').innerHTML=this.getAttribute('description');
    // 事件添加
    left.addEventListener('click', ()=>{
      console.log('点击了');
    })
    shadow.appendChild(content);
  }
}
window.customElements.define('food-card', FoodCard);
5、生命周期回调

注意： 生命周期回调在构造方法之外使用

5.1、connectedCallback

每次将自定义元素附加到与文档连接的元素中时调用。这将在每次移动节点时发生，并且可能在元素的内容被完全解析之前发生。

class FoodCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow( { mode: 'closed' } );
    const templateElem = document.getElementById('myFoodCard');
    const content = templateElem.content.cloneNode(true);
    const left = content.querySelector('.left');
    content.querySelector('.image').setAttribute('src', this.getAttribute('src'));
    content.querySelector('.right-top').innerHTML=this.getAttribute('title');
    content.querySelector('.right-bottom').innerHTML=this.getAttribute('description');
    left.addEventListener('click', ()=>{
      console.log('点击了');
    })
    shadow.appendChild(content);
  }
  connectedCallback(){
    console.log('触发');
  }
}
window.customElements.define('food-card', FoodCard);
5.2、disconnectedCallbac

每次自定义元素与文档的 DOM 断开连接时调用。

5.3、adoptedCallback

每次将自定义元素移动到新文档时调用。

5.4、attributeChangedCallback

每次添加、删除或更改自定义元素的属性之一时调用

6、组件单独抽离

由于上述封装时候还需要在index.html文件里写入模板内容，这样就会导致index.html增添了一些无用的DOM元素，因此，将template元素内容抽离到组件里边去。改动如下：
index.js

const templateElemList = `
<style>
  section {
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  section .left{
    min - width: 20px;
    max-width: 200px;
    height: 100%;
    overflow: hidden;
  }
  .left img{
    width: 100%;
  }
  section .right {
    flex: 1;
    padding-left: 10px;
  }
</style>
<section>
  <div class="left">
    <img src="" class="image" />
  </div>
  <div class="right">
    <div class="right-top">标题</div>
    <div class="right-bottom">描述</div>
  </div>
</section>`;
class FoodCard extends HTMLElement {
  constructor() {
    super();
    let templateElem = document.createElement("template");
    templateElem.setAttribute("id", "myFoodCard");
    templateElem.innerHTML = templateElemList;
    const shadow = this.attachShadow({ mode: "closed" });
    const content = templateElem.content.cloneNode(true);
    const left = content.querySelector(".left");
    content
      .querySelector(".image")
      .setAttribute("src", this.getAttribute("src"));
    content.querySelector(".right-top").innerHTML = this.getAttribute("title");
    content.querySelector(".right-bottom").innerHTML =
      this.getAttribute("description");
    left.addEventListener("click", () => {
      console.log("点击了");
    });
    shadow.appendChild(content);
  }
  connectedCallback() {
    console.log("触发");
  }
}
window.customElements.define("food-card", FoodCard);

index.html中将template部分内容去掉

<!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>web components</title>
  </head>
  <body>
    <food-card
      src="http://qianlingvip.cn:3300/uploads/2021-05-13-15-13-451546.jpg"
      title="红烧猪蹄"
      description="红烧猪蹄是补充胶原蛋白的不二选择"
    />
    <script src="./index.js"></script>
  </body>
</html>
qianlingvip
关注
专栏目录
web components
majunjie2017的博客
07-08 1117
Web components 是什么？ web components 就是网页组件式开发的技术规范。 web components 由三个独立的技术组成： Custom Elements（自定义元素）：是用户使用一组 JavaScript API 自己定义生成的包含行为和标记名称的自定义模板，是完全有效的 HTML 元素。 shadow DOM（影子 DOM）：能够隔离 CSS 和 Jav...
Web Components
weixin_34403693的博客
08-14 85
Web Components是什么 Web Components是一个聚集html,css,js的一个可复用组件。 这样开发者就可以在网络上通过插件或组件的形式分享自己的代码片段(具有独立的功能)，也可以理解成web组件或插件。 Web Components的组成要素 自定义元素 html模版 shadowDOM HTML(组件)导入 shadowDOM是什么 定义：浏览器将模板、样式表...
八个 Web Components 前端框架，一定有一个你用得上
最新发布
2401_83384536的博客
07-18 1351
尽管 Web Components 可能还没有全面的进入研发者的视野，现在还备受争议，但是它已经被很多大厂已经直接或者间接将它用于实践，并且在市场上也出现了很多 Web Components 库，可以轻松的使用和构建 Web Components，本文也列举了八个 Web Components 的前端框架：Stencil：是一个用于构建可重用、可扩展的设计系统的工具链。生成可在每个浏览器中运行的小型、极快且 100% 基于标准的 Web Components。
Web Components（web组件）
mantou_riji的博客
02-22 2628
自定义元素即由 Web 开发人员自行定义 HTML 元素，扩展浏览器中可用的元素集。自定义内置元素：继承自标准的 HTML 元素：例如HTMLImageElement 或 HTMLParagraphElement。它们的实现定义了标准元素的行为。无需从头开始实现行为。独立自定义元素：继承自HTML 元素基类 HTMLElement。必须从头开始实现它们的行为。自定义元素作为一个类来实现。在类的构造函数中：可以设置初始状态和默认值，注册事件监听器，创建一个影子根（shadow root）；
Web Components 是什么
weixin_33747129的博客
01-02 1132
/********************************************************************************* * Web Components 是什么 * 说明： * 在聊天中有人提到Web Components，查一下资料看一下这是什么东西。 * * ...
干货 | React Server Components 初探
携程技术
08-05 490
作者简介Sprite 82，喜欢研究各种语言对 web 框架的实现，函数式编程的爱好者，最近在编译原理前端中验证学习到的函数式编程知识。随着前端职能在互联网公司的重要性与日俱增，我们的前...
React源码剖析与解读：React Server Components初探
React Server Components简介 #### 1.1 React Server Components的背景与概念解析 在传统的React开发中，组件的渲染通常是在客户端进行的，这就意味着组件的数据获取和渲染都是在浏览器中完成的。而随着前后端分离...
移动端开发初探：探索移动端Web开发之道
移动端Web开发与传统Web开发在技术上有一些不同之处，需要考虑移动设备较小的屏幕尺寸、触摸操作、网络环境、设备兼容性等因素，因此开发移动端Web应用需要针对移动特性进行优化。同时，移动端Web开发也面临着一些...
初探 SCF 的 Web function 和 Custom image
腾讯云 Serverless
06-18 199
以下内容来自「icebreaker」原创文章：《初探 SCF 的 Web function 和 Custom image》，以获取授权。 一篇 Hello world，初步介绍这 2 个新功能如何使用 文中这 2 个功能也很快要全区域公测了 前言 最近腾讯云SCF最新内测了 Web function Custom image 这两个功能，笔者内测申请通过了，就兴致勃勃的尝试了一下 01. Web function 过去 在 Web function 出现之前，我们在编写 SCF 函数 去处理 ht
swfUpload使用初探
03-17
**SwfUpload 使用初探** SwfUpload 是一个开源的Flash上传组件，它允许开发者在网页上实现多文件...但随着技术的发展，开发者也应关注其替代方案，比如HTML5的拖放上传和Web Components，以确保应用程序的未来兼容性。
WebComponent
11-15
海康威视最新网络监控软件 … …
WebComponents插件
11-11
比如说，登录了海康摄像头，在预览中看着，画面是黑的，就需要使用这个插件。当然必须是有IE内核的。 原来分数太高，又不是自己写的，所以降低分数。
WebComponents.exe
05-23
WebComponents.exe 海康DVR
WebComponentsKit 3.0.6.1
12-08
3.0.6.1版本的WebComponentsKit。 配合1.0.6版本的webVideoCtrl.js，可以解决Chrome上不支持NAAPI的问题
webcomponents 3.0.5.56.zip
06-23
海康监控B/S 代码，完整代码 3.0.5.56版本 webcomponents 3.0.5.56.zip
Web components
Ronychen的博客
11-23 1621
组件化介绍 背景： 原先一个复杂页面， 什么是组件化： 组件化的优点： 组件是模块化编程思想的体现，便于代码复用 便于团队协作开发，提高了开发效率 代码维护性好，对于代码的管理和使用非常方便，组件的加载和卸载只需要添加或删除一行代码即可完成 组件提供了html、css、js的封装方法，实现了与同一页面其他代码的隔离 组件非常灵活，定制非常容易，组件往往会留出接口，供使用者设置常用属性，比如title组件，使用者可以自定义标题、样式等 ...
Web Component
wade3po的博客
11-14 192
MDN 上面的解释是 Web Component 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 web 应用中使用它们。其实挺语义化的，就是组件的意思。相对于 react 和 vue 可以很容易的创建一些组件，原生的最早之前对组件的概念非常弱。Web Component 的一个愿景就是可以使用原生的创建组件，跨越不同团队不同项目不同框架共用组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值