深入理解Web Components

最新推荐文章于 2024-07-18 14:38:38 发布
最新推荐文章于 2024-07-18 14:38:38 发布
阅读量1.2w 收藏 43
点赞数 11
分类专栏： JavaScript 其他 文章标签： web components javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwe435541908/article/details/117133943
版权

1. 什么是Web Components？它的出现原因？为什么要学习它？

Web Components 是一个浏览器原生支持的组件化方案，允许你创建新的自定义、可封装、可重用的HTML 标记。不用加载任何外部模块，直接就可以在浏览器中跑。

它的出现原因？因为早期组件生态很乱，有各种各样的框架和库，都有各自的规范，导致一个团队切换框架很困难 。为了解决这种分化的形式，让 Web 组件模型统一化，所以才有了Web Components规范的出现。目标是提供一种权威的、浏览器能理解的方式来创建组件。

为什么要学习它？用一句话总结就是回顾历史展望未来。

2011年提出Web Components概念，React诞生

2013年 Chrome 和 Opera 又联合提出了推出的 V0 版本的 Web Components 规范，React开源

2014年Vue诞生

2016年Web Components 推进到了 V1 版本

由于浏览器兼容性、和主流框架开发效率等等问题导致现在几乎使用不到它，但我们可以学习它的思想，也许未来就会变的有用？

2. Web Components 由三种技术组成

Custom Elements

可以创建一个自定义标签。根据规范，自定义元素的名称必须包含连词线”-“，用与区别原生的 HTML 元素。

<body>
    <user-card></user-card>
    <script>
        class UserCard extends HTMLElement {
            constructor() {
                super();
                
                var el = document.createElement('p');
                el.classList.add('name');
                el.innerText = 'User Name';
                
                this.append(el);
            }
        }
        window.customElements.define('user-card', UserCard);
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1Av4lYZ-1621597650365)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%B7%B2%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%9B%BE%E7%89%87/webcomponents%E5%AD%A6%E4%B9%A0/image-20210504213119362.png)]

class UserButton extends HTMLButtonElement {
    constructor() {
    	super();
    }
}

customElements.define('user-button', UserButton, { extends: "button" });
<button is="user-button">

</button>
使用生命周期回调函数

在custom element的构造函数中，可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用：

  • connectedCallback：当 custom element首次被插入文档DOM时，被调用。
  • disconnectedCallback：当 custom element从文档DOM中删除时，被调用。
  • adoptedCallback：当 custom element被移动到新的文档时，被调用。
  • attributeChangedCallback: 当 custom element增加、删除、修改自身属性时，被调用。
Shadow DOM

Shadow DOM是对DOM的一个封装。可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。

<style>
    p {
        color: blueviolet;
    }
</style>

<p>不会影响shadow样式</p>
<script>
    const header = document.createElement('header');
    const shadowRoot = header.attachShadow({mode: 'closed'});// header.shadowRoot === null
    // const shadowRoot = header.attachShadow({mode: 'open'});// header.shadowRoot === shadowRoot   	#document-fragment
    shadowRoot.innerHTML = '<p>Hello Shadow DOM</p>';
    document.querySelector('body').append(header);// shadowRoot.host === header
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QMU9AZAI-1621597589953)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%B7%B2%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%9B%BE%E7%89%87/%E5%AD%A6%E4%B9%A0%E4%BD%BF%E7%94%A8webcomponents/image-20210506170009819.png)]

修改shadow dom内部样式:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-roe3zfOO-1621597589954)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%B7%B2%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%9B%BE%E7%89%87/%E5%AD%A6%E4%B9%A0%E4%BD%BF%E7%94%A8webcomponents/image-20210507114101311.png)]

templates and slots

可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

  1. 被使用前不会被渲染。
  2. 被使用前对页面其他部分没有影响，脚本不会运行，图像不会加载，音频不会播放。
<body>
    <p>会影响外部样式</p>
    <template id="my-paragraph">
        <style>
            p{color: red;}
        </style>
        <p>My paragraph</p>
    </template>
    <my-paragraph></my-paragraph>
    <script>
        customElements.define('my-paragraph',
            class extends HTMLElement {
                constructor() {
                    super();
                    let template = document.getElementById('my-paragraph');
                    let templateContent = template.content.cloneNode(true);

                    this.appendChild(templateContent);
                }
        })
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6UQBWgIy-1621597589956)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%B7%B2%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%9B%BE%E7%89%87/%E5%AD%A6%E4%B9%A0%E4%BD%BF%E7%94%A8webcomponents/image-20210506170311517.png)]

slot的使用：

<body>
    <style>
        p{color: blueviolet;}
    </style>
    
    
    <p>会影响外部样式</p>
    <template id="my-paragraph">
        <style>
            p{color: red;}
        </style>
        <p>My paragraph</p>
        <slot name="my-text">My default text</slot>
    </template>
    
    
    <my-paragraph>
        <p slot="my-text">slot text</p>
    </my-paragraph>
    
    
    <script>
        customElements.define('my-paragraph',
            class extends HTMLElement {
                constructor() {
                    super();
                    let template = document.getElementById('my-paragraph');
                    let templateContent = template.content.cloneNode(true);
                    this.attachShadow({mode: 'open'}).appendChild(templateContent);
                }
        })
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ff0KSkdH-1621597589957)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%B7%B2%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%9B%BE%E7%89%87/%E5%AD%A6%E4%B9%A0%E4%BD%BF%E7%94%A8webcomponents/image-20210506172255519.png)]

3. 实现一个计数器组件

<body>
    <template id="button-counter">
        <style>
            p{color: blueviolet;}
        </style>
        
        <span id="counter"></span>
        <button id="button"></button>
    </template>
    <button-counter counter="0" label="增加1"></button-counter>
    <script>
        document.querySelector('button-counter').buttonCounter=(val)=>{}
        
        // document.querySelector('button-counter').addEventListener('test', (val)=>{
        //     console.log(val.detail.counter);
        // })
        
        class ButtonCounter extends HTMLElement {
            constructor() {
                super();
                
                let shadowRoot = this.attachShadow({mode: 'open'});
                let el = document.querySelector('#button-counter').content.cloneNode(true);
                shadowRoot.appendChild(el);
                
                this.$counter = shadowRoot.querySelector('#counter');
                this.$button = shadowRoot.querySelector('#button');
                this.$button.addEventListener('click', () => {
                    this.counter++;
                    this.buttonCounter(this.counter);
                    
                    // this.dispatchEvent(
                    //     new CustomEvent('test', {
                    //         detail: {counter: this.counter},
                    //     })
                    // );
                });
            }
            get label() {
                return this.getAttribute('label');
            }
            set label(value) {
                this.setAttribute('label', value);
            }
            
            get counter() {
                return this.getAttribute('counter');
            }
            set counter(value) {
                this.setAttribute('counter', value);
            }
            
            static get observedAttributes() {
                return ['label', 'counter'];
            }
            attributeChangedCallback(name, oldVal, newVal) {
                console.log('attributeChangedCallback');
                this.render();
            }
            
            render() {
                this.$button.innerHTML = this.label;
                this.$counter.innerHTML = `You clicked me ${this.counter} times`;
            }
            
            connectedCallback() {
                console.log('connectedCallback');
            }
            
            disconnectedCallback() {
                console.log('disconnectedCallback');
            }
            adoptedCallback() {
                console.log('adoptedCallback');
            }
        }
        customElements.define('button-counter', ButtonCounter)
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5mJFsmI0-1621597589958)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%B7%B2%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%9B%BE%E7%89%87/webcomponents%E5%AD%A6%E4%B9%A0/image-20210505130801797.png)]

4. Web Components vs Vue Components

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BkQAeKfI-1621597589958)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%B7%B2%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%9B%BE%E7%89%87/%E5%AD%A6%E4%B9%A0%E4%BD%BF%E7%94%A8webcomponents/image-20210507111257968.png)]

VueWeb Component
data实例属性
propsattributes
watchobservedAttributes
attributeChangedCallback
computedgetters
methodsclass methods
mountedconnectedCallback
destroyeddisconnectedCallback
style scopedtemplate中的style
templatetemplate
computed: {
  name() {
    return this.planet.name || '';
  },
}


get name() {
  return this.planet.name || '';
}

components: { 
  "planet-summary": PlanetSummary
}


customElements.define("planet-summary", PlanetSummary);

watch: {
  altitude(newValue, oldValue) {
    ...
  }
}
  
    
static get observedAttributes() {
  return ['altitude'];
}
attributeChangedCallback(name, oldValue, newValue) {

}
性能比较

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GmIHvlpM-1621597589959)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%B7%B2%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%9B%BE%E7%89%87/%E5%AD%A6%E4%B9%A0%E4%BD%BF%E7%94%A8webcomponents/line-stack%20(2)].png)

从上图可以看出在浏览器中组件越多，vue的js计算时间比web components越少，性能越好。原因大概是因为

vue是通过 模板->虚拟DOM->真实DOM 来实现自定义组件的。

web components是在浏览器中通过 自定义组件->Shadow Dom 实现自定义组件的。

导致了浏览器中vue的性能比web components性能优秀。

5. 优点与缺点

  1. 浏览器原生支持，不需要引入额外的第三方库
  2. 语义化
  3. 复用性，移植性高
  4. 不同团队不同项目可以共用组件
缺点
  1. 需要操作DOM
  2. 目前浏览器兼容性、性能方面不够友好
  3. 和外部css交互比较难

6. 浏览器兼容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rv5ZU0Z0-1621597589960)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%B7%B2%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%9B%BE%E7%89%87/%E5%AD%A6%E4%B9%A0%E4%BD%BF%E7%94%A8webcomponents/image-20210510101144361.png)]

兼容性不好的浏览器可以通过引入webcomponentsjs来polyfills。

<!-- load webcomponents bundle, which includes all the necessary polyfills -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

<!-- load the element -->
<script type="module" src="my-element.js"></script>

<!-- use the element -->
<my-element></my-element>

7. 基于web components的框架

LitElement

LitElement是一个快速、轻量级的 Web UI 框架。使用 lit-html 来渲染元素。

Polymer

Polymer是一款实用、基于事件驱动、封装性和交互性强的 Web UI 框架。

Omi

Omi是基于 Web 组件的跨框架跨平台框架 。移动端&桌面&小程序。

My_Bells
关注
  • 11
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
webcomponents-examples：Web组件，webcomponentsjs，@webcomponents
02-06
Web Components是现代Web开发中的一个重要概念，它允许开发者创建可重用、自包含的...通过`webcomponents-examples`项目，开发者可以深入了解Web Components的各项技术，并运用到实际开发中，提升应用的质量和效率。
webcomponents
05-29
Web Components 是一种在JavaScript中创建可...通过查看和学习这个仓库中的代码，可以深入了解Web Components的实现方式，以及如何在实际项目中运用这些技术。可能包含组件的定义、样式、示例用法以及相关的测试文件。
深入理解 web components
weixin_51431277的博客
02-24 2950
web components 、vue 集合 web components、shadow dom 、html template、slots、custom elements、attachShadow、customElements、cloneNode、defineCustomElement
探索Web Components
06-16 940
这篇文章介绍了Web Components技术，它允许开发者创建可复用、封装良好的自定义HTML元素，并直接在浏览器中运行，无需依赖外部库。通过组合HTML模板、Shadow DOM、自定义元素和HTML imports，Web Components增强了原生DOM的功能，提高了组件化开发的封装性和可维护性，同时支持组件的生命周期管理和高级设计模式，有利于提升网页应用的性能和开发效率。
Web Components 学习 02 Web Components 历史、深入理解 Custom Elements
皮蛋很白的博客
06-16 1728
尤雨溪在创建 Vue 的时候大量参考了 Web Components 的语法，下面写个简单示例。首先写个 Vue 组件 ： 这是很标准的 Vue 组件，不过非常遗憾的是 HTML 文件并不能有效的利用这个 vue 文件，如果想让它能够正确运行，还需要下载 node、webpack、vue-loader 将其打包，而且它只能在 Vue 的项目中使用，也就是必须依赖 Vue 的安装包。如果在 React、Angular 甚至 jQuery 项目中，这个组件就不能用了。但是以前只需要将它稍稍修改一下，它就会变成
Web Components学习(3)-深入理解自定义元素
woyebuzhidao321的博客
03-10 938
之前说到定义自定义元素行为的类一定要继承自 HTMLElement，只有继承了它才能使用元素上的属性，如。
基于 WebComponents 封装 UI 组件库
frontend_frank的博客
06-08 715
????这是第 142篇不掺水的原创，想要了解更多，请戳下方卡片关注我们吧～如何基于WebComponents封装UI组件库https://www.zoo.team/article/web-components前言作为一名前端攻城狮，相信大家也都在关注着前端的一些新技术，近些年来前端组件化开发已为常态，我们经常把重用性高的模块抽离成一个个的组件，来达到复用的目的，...
JavaScript Web Components 教程：构建可复用自定义组件
梁三石FE
04-19 443
我们可以定义新的、功能丰富的用户界面元素，并且它们可以像标准HTML元素一样在任何地方被轻易地使用和组合。开发带来了一种强大的组件化方式，让开发者能够更好地组织代码，提升代码复用性和维护性。原本用于导入HTML文件作为组件的载体，但在现代浏览器中，我们通常使用ES6模块或其他模块加载机制来引入组件脚本。提供了封装样式和结构的能力，使组件内部的CSS样式不会影响到外部环境，反之亦然。允许开发者扩展HTML元素集合，通过定义新的标签来创建自定义组件。的世界，了解其核心概念并实战创建一个基本的自定义组件。
八个 Web Components 前端框架，一定有一个你用得上
最新发布
2401_83384536的博客
07-18 1014
尽管 Web Components 可能还没有全面的进入研发者的视野，现在还备受争议，但是它已经被很多大厂已经直接或者间接将它用于实践，并且在市场上也出现了很多 Web Components 库，可以轻松的使用和构建 Web Components，本文也列举了八个 Web Components 的前端框架：Stencil：是一个用于构建可重用、可扩展的设计系统的工具链。生成可在每个浏览器中运行的小型、极快且 100% 基于标准的 Web Components。
Web Components详解-HTML Templates
02-18 913
​ 在前面Web Components系列文章的插槽中，我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素，这么做会使标签在DOM多渲染一次，不仅降低了性能，还使标签直接暴露在页面中，遵循组件的可重用性、隔离性和封装性，Web Components提供了一种模板标签：template。它可以在DOM文档中定义模板，然后可以通过JavaScript动态地填充和显示这些模板，达到html组件封装的效果。
推荐项目：Web Components —— 让网页开发更组件化
gitblog_00045的博客
05-10 423
推荐项目：Web Components —— 让网页开发更组件化 项目地址:https://gitcode.com/WICG/webcomponents 1、项目介绍 Web Components 是一种新兴的浏览器特性，旨在为Web提供标准化的组件模型。它由多个部分组成，包括 Shadow DOM、Custom Elements、HTML Templates 和 CSS 相关变化。这个项目由W3...
海康威视开发包（内含WebComponents.exe插件）
06-25
本文将深入探讨海康威视开发包中的核心组件——WebComponents.exe插件，以及相关的开发文档和示例。 一、WebComponents.exe插件详解 WebComponents.exe是一款专为Web 3.0环境设计的视频监控插件，它集成了海康威视...
WebComponents
07-12
WebComponents 是一种在Web开发中实现自定义可重用组件的技术。...WebComponents的核心特性...此外，源代码可以帮助你理解WebComponents是如何实现自定义组件的，这对于学习WebComponents技术或者进行二次开发非常有帮助。
海康威视web插件(Web Components) + demo.rar
07-11
综上所述，这个压缩包提供的资源对学习和使用海康威视Web插件，以及深入了解Web Components技术有很大的帮助。开发者可以通过学习和实践这个demo，掌握在Web环境中集成监控设备的核心技术，并且提升自己的Web开发...
webcomponents 3.0.5.56.zip
06-23
为了深入了解海康监控B/S系统的实现，开发者需要仔细研究这个开发包，尤其是JavaScript代码，因为那是实现Web Components功能的关键。同时，遵循“使用说明.txt”中的指南，可以顺利地在本地环境运行和测试这个系统...
web-components-todo：使用各种Web组件技术构建的简单待办事项列表
02-06
通过这个项目，你可以深入理解Web组件的基本原理和不同实现方式之间的差异。学习如何在实际项目中使用这些技术，提升你的Web开发技能。同时，这也是一个很好的起点，帮助你更好地掌握前端组件化开发，提高代码复用性...
vanilla-web-components：使用Web Components探索Vanilla
02-06
通过深入研究"vanilla-web-components"项目，开发者可以掌握Web Components的精髓，理解它们如何与Vanilla JavaScript结合，从而在实际项目中实现高效、可维护的组件化开发。这不仅有助于提升开发效率，也有利于代码...
web components
08-15
- *2* [深入理解Web Components](https://blog.csdn.net/qwe435541908/article/details/117133943)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值