【前端知识】Web Components详细解读

概述

• 什么是Web Component
  
  
  
  • Web Component是一套差别的Web技术的集合，允许开发者创建可重用的定制化HTML标签，并且能够在Web应用中进行封装和利用。它主要由三部门技术构成：Custom Elements（自定义元素）、Shadow DOM（影子DOM）和HTML Templates（HTML模板）。
    
  • Custom Elements（自定义元素）
    
    
    
    • 自定义元素允许开发者定义自己的HTML标签。例如，我们可以定义一个<my - custom - element>标签，就像浏览器原生的<div>或<p>标签一样利用。通过继承HTMLElement类或者它的子类（如HTMLButtonElement等）来创建自定义元素。
      
    • 代码示例：
      1. class MyCustomElement extends HTMLElement {
      2.   constructor() {
      3.     super();
      4.     // 在这里可以进行元素的初始化操作，比如添加内容、样式等
      5.     this.textContent = 'This is my custom element';
      6.   }
      7. }
      8. customElements.define('my - custom - element', MyCustomElement);

      复制代码
      在这个例子中，我们定义了一个名为my - custom - element的自定义元素，它在被创建时会表现This is my custom element这段文本。然后通过customElements.define方法将这个自定义元素注册到浏览器中，这样就可以在HTML中利用<my - custom - element>标签了。
      
    
    
  • Shadow DOM（影子DOM）
    
    
    
    • 影子DOM提供了一种将一个隐藏的、独立的DOM树附加到一个元素上的方式。这使得组件的内部布局（包括HTML布局、CSS样式和JavaScript行为）与外部页面隔离开来，避免了样式和脚本的辩论。
      
    • 例如，一个自定义的按钮组件可能有自己内部的HTML布局（如一个<span>标签用于表现按钮文本，一个<div>标签用于设置背景样式等）和CSS样式。通过影子DOM，这些内部布局可以被封装起来，外部页面的CSS样式不会影响到组件内部的样式。
      
    • 代码示例：
      1. class MyShadowDOMElement extends HTMLElement {
      2.   constructor() {
      3.     super();
      4.     // 创建影子DOM
      5.     const shadow = this.attachShadow({mode: 'open'});
      6.     // 创建内部的HTML元素
      7.     const div = document.createElement('div');
      8.     div.textContent = 'Content inside Shadow DOM';
      9.     // 创建样式
      10.     const style = document.createElement('style');
      11.     style.textContent = 'div { color: blue; }';
      12.     // 将样式和元素添加到影子DOM中
      13.     shadow.appendChild(style);
      14.     shadow.appendChild(div);
      15.   }
      16. }
      17. customElements.define('my - shadow - dom - element', MyShadowDOMElement);

      复制代码
      在这个例子中，我们创建了一个带有影子DOM的自定义元素。在影子DOM中，我们添加了一个<div>元素用于表现内容，并定义了一个简单的CSS样式，使得<div>中的文本颜色为蓝色。外部页面的CSS样式不会影响这个内部<div>的颜色。
      
    
    
  • HTML Templates（HTML模板）
    
    
    
    • HTML模板是一种用于在HTML中定义可重复利用的代码片段的机制。它允许我们在HTML中定义模板内容，这些内容在初始加载时不会被渲染，只有当我们需要利用它们时才会被激活。
      
    • 例如，我们可以定义一个模板用于一个列表项，然后在JavaScript中根据数据动态地创建多个列表项。
      
    • 代码示例：
      1. <template id="my - template">
      2.   <li>
      3.     <span class="item - name"></span>
      4.     <span class="item - description"></span>
      5.   </li>
      6. </template>

      复制代码
      1. const template = document.getElementById('my - template');
      2. const dataList = [
      3.   {name: 'Item 1', description: 'Description of Item 1'},
      4.   {name: 'Item 2', description: 'Description of Item 2'}
      5. ];
      6. const ul = document.createElement('ul');
      7. dataList.forEach((data) => {
      8.   const clone = template.content.cloneNode(true);
      9.   const nameSpan = clone.querySelector('.item - name');
      10.   const descSpan = clone.querySelector('.item - description');
      11.   nameSpan.textContent = data.name;
      12.   descSpan.textContent = data.description;
      13.   ul.appendChild(clone);
      14. });
      15. document.body.appendChild(ul);

      复制代码
      在这个例子中，我们首先在HTML中定义了一个模板my - template，它包含一个列表项的基本布局。然后在JavaScript中，我们获取这个模板，根据一个数据列表动态地创建多个列表项，将数据填充到模板的相应位置，并将这些列表项添加到一个<ul>元素中，最后将<ul>元素添加到页面的body部门。
      
    
    
  
  
• Web Component的上风
  
  
  
  • 封装性
    
    
    
    • 由于Shadow DOM和自定义元素的存在，Web Component能够很好地封装内部布局和行为。这使得代码更加模块化，便于维护和复用。差别的组件可以独立开发，不用担心相互之间的样式和脚本辩论。例如，一个团队开发的组件可以被其他团队直接利用，而不会干扰到现有页面的布局和功能。
      
    
    
  • 复用性
    
    
    
    • 可以像利用原生HTML元素一样利用Web Component。一旦定义好一个组件，它可以在多个页面或者项目中重复利用。比如，一个自定义的导航栏组件可以在公司的多个产物页面中利用，只需要在每个页面中引入这个组件即可，大大提高了开发效率。
      
    
    
  • 可维护性
    
    
    
    • 组件化的布局使得代码的维护更加方便。如果需要对一个组件进行修改或者升级，只需要在组件的定义处进行利用，而不会影响到利用这个组件的其他页面或者组件。例如，如果要更新一个表单组件的样式或者验证逻辑，只需要修改这个表单组件的代码，而不用在每个利用该表单的地方进行逐一修改。
      
    
    
  
  
• Web Component的应用场景
  
  
  
  • 组件库开发
    
    
    
    • 可以用于构建大型的组件库，如UI组件库。像按钮、表单、菜单等组件都可以作为Web Component进行开发。这样的组件库可以被差别的项目复用，提高开发效率。例如，一个公司可以开发一套内部利用的UI组件库，包含各种风格统一的组件，供各个产物团队利用。
      
    
    
  • 微前端架构
    
    
    
    • 在微前端架构中，每个微应用可以被封装成一个Web Component。差别的团队可以独立开发自己的微应用，然后将它们组合成一个完备的应用。例如，一个电商网站可以有产物展示微应用、购物车微应用、用户登录微应用等，这些微应用可以通过Web Component的方式集成在一起。
      
    
    
  
  

Shadow DOM是什么？

• 定义
  
  
  
  • Shadow DOM是Web Components尺度的一部门，它允许开发者将一个隐藏的、独立的DOM树附加到一个元素上。这就像是在一个主文档的DOM中创建了一个“影子”DOM，这个“影子”DOM有自己的布局和样式，与主文档的DOM相互隔离。
    
  
  
• 隔离性
  
  
  
  • 样式隔离：Shadow DOM中的样式不会泄漏到主文档中，主文档中的样式也不会影响Shadow DOM内部的元素。例如，如果在主文档中有一个全局的p标签样式（如p { color: blue; }），在Shadow DOM内部的p标签不会受到这个样式的影响，除非在Shadow DOM内部显式地引用了外部样式。
    
  • 布局隔离：Shadow DOM内部的元素布局对于外部是隐藏的。这意味着外部JavaScript代码不能直接访问Shadow DOM内部的元素，就像它们被封装在一个黑盒中一样。例如，在一个自定义元素的Shadow DOM中，有一个<input>元素，外部脚本不能直接通过document.querySelector('input')来获取这个输入元素，因为它被封装在Shadow DOM中。
    
  
  
• 创建Shadow DOM
  
  
  
  • 可以利用JavaScript来创建Shadow DOM。以下是一个简单的示例，创建一个自定义元素并附加Shadow DOM：
    
  1. class MyCustomElement extends HTMLElement {
  2.     constructor() {
  3.         super();
  4.         // 创建Shadow DOM
  5.         const shadow = this.attachShadow({ mode: 'open' });
  6.         // 创建一个内部元素
  7.         const p = document.createElement('p');
  8.         p.textContent = '这是Shadow DOM内部的内容';
  9.         // 将元素添加到Shadow DOM中
  10.         shadow.appendChild(p);
  11.     }
  12. }
  13. customElements.define('my - custom - element', MyCustomElement);

  复制代码
    
  
  
  
  • 在这个示例中，首先通过attachShadow方法创建了一个Shadow DOM，它有两种模式：open和closed。open模式允许外部JavaScript通过element.shadowRoot访问Shadow DOM，而closed模式则不允许。然后创建了一个<p>元素并添加到Shadow DOM中。最后，利用customElements.define定义了一个新的自定义元素，这样就可以在HTML中利用<my - custom - element>标签来引用这个包含Shadow DOM的自定义元素。
    
  
  
• 利用场景
  
  
  
  • 组件化开发：Shadow DOM非常适合构建可复用的Web组件。它允许开发者封装组件的内部布局和样式，使得组件可以在差别的项目和环境中利用，而不会受到外部样式和脚本的干扰。例如，一个自定义的按钮组件可以在Shadow DOM中定义按钮的样式（如颜色、大小、边框等）和内部布局（如包含一个<span>元素用于表现按钮文本），然后在差别的网页中像利用普通HTML元素一样利用这个自定义按钮组件。
    
  • 避免样式辩论：在大型的Web项目中，样式辩论是一个常见的题目。差别的CSS库或者差别开发人员编写的CSS规则可能会相互干扰。Shadow DOM通过提供样式隔离的功能，可以有效地避免这种情况。例如，一个网页可能同时利用了Bootstrap和自己开发的一些自定义组件，通过将自定义组件的内部样式封装在Shadow DOM中，可以确保组件的样式不会与Bootstrap的样式相互辩论。
    
  
  

自定义HTML标签

• 利用customElements.define方法
  
  
  
  • 首先，需要定义一个类来扩展原生的HTMLElement（或者它的子类）。这个类将包含自定义标签的行为和布局。例如，创建一个名为<my - custom - tag>的自定义标签：
    
  1. class MyCustomTag extends HTMLElement {
  2.     constructor() {
  3.         super();
  4.         // 创建Shadow DOM（可选，但通常用于封装样式和结构）
  5.         const shadow = this.attachShadow({ mode: 'open' });
  6.         const div = document.createElement('div');
  7.         div.textContent = '这是自定义标签的内容';
  8.         shadow.appendChild(div);
  9.     }
  10. }
  11. customElements.define('my - custom - tag', MyCustomTag);

  复制代码
    
  
  
  
  • 在这个示例中，MyCustomTag类是自定义标签的焦点。constructor方法在创建标签实例时被调用。通过super()调用父类（HTMLElement）的构造函数，这是必须的步骤。
    
  • 然后可以选择创建Shadow DOM，如上述示例中的this.attachShadow({ mode: 'open' });。这里的mode: 'open'表示可以从外部访问这个Shadow DOM。如果设置为closed，外部将无法访问。
    
  • 接着创建了一个<div>元素，并设置了它的文本内容，最后将这个<div>元素添加到Shadow DOM中。
    
  • 最后，利用customElements.define('my - custom - tag', MyCustomTag);来注册这个自定义标签。第一个参数是自定义标签的名称（注意标签名称中不能包含大写字母，按照惯例，多个单词之间用连字符分隔），第二个参数是定义这个标签的类。
    
  
  
• 考虑模板（template）和插槽（slot）的利用
  
  
  
  • 模板（template）
    
    
    
    • 模板可以资助定义自定义标签的布局，并且可以在多个实例中复用。例如：
      
    1. <template id="my - template">
    2.     <style>
    3.         /* 定义内部样式 */
    4.         p {
    5.             color: blue;
    6.         }
    7.     </style>
    8.     <div>
    9.         <p>这是模板中的内容</p>
    10.     </div>
    11. </template>

    复制代码
       
    
    
    
    • 这是一个简单的HTML模板，包含了样式和布局。可以在自定义标签的类中利用这个模板来创建元素：
      
    1. class MyCustomTagWithTemplate extends HTMLElement {
    2.     constructor() {
    3.         super();
    4.         const shadow = this.attachShadow({ mode: 'open' });
    5.         const template = document.getElementById('my - template');
    6.         const templateContent = template.content.cloneNode(true);
    7.         shadow.appendChild(templateContent);
    8.     }
    9. }
    10. customElements.define('my - custom - tag - with - template', MyCustomTagWithTemplate);

    复制代码
       
    
    
    
    • 在这里，首先获取了id为my - template的模板元素，然后利用cloneNode(true)克隆了模板的内容（包括子节点），并将克隆后的内容添加到Shadow DOM中。
      
    
    
  • 插槽（slot）
    
    
    
    • 插槽用于在自定义标签中吸收外部传入的内容。例如，定义一个带有插槽的模板：
      
    1. <template id="my - slot - template">
    2.     <div>
    3.         <slot></slot>
    4.     </div>
    5. </template>

    复制代码
       
    
    
    
    • 这个模板中有一个<slot>元素，它可以吸收外部的内容。在利用自定义标签时，可以这样传入内容：
      
    1. <my - custom - tag - with - slot>
    2.     <p>这是传入插槽的内容</p>
    3. </my - custom - tag - with - slot>

    复制代码
       
    
    
    
    • 当自定义标签被渲染时，<p>这是传入插槽的内容</p>会被插入到模板中的<slot>位置。这样就实现了更灵活的内容转达和自定义标签的利用。
      
    
    
  
  

哪些框架可以提高开发效率？

• LitElement
  
  
  
  • 简介
    
    
    
    • LitElement是一个轻量级的Web组件库，它构建在Web组件尺度之上，提供了一种简单而高效的方式来创建可复用的自定义元素。它利用JavaScript的ES6类语法和模板字面量来定义组件的外观和行为。
      
    
    
  • 特点
    
    
    
    • 反应式更新：LitElement具有反应式更新机制。当组件的属性发生变化时，它能够自动更新DOM，这减少了手动利用DOM的复杂性。例如，如果你有一个表现用户名字的组件，当用户名字属性改变时，组件会自动重新渲染来表现新的名字。
      
    • 高效的模板渲染：它利用了JavaScript的模板字面量来创建高效的HTML模板。这些模板在编译时会被优化，以减少不必要的DOM利用。比如，在一个列表组件中，模板可以快速地根据数据生成多个列表项。
      
    • 小巧轻便：LitElement本身非常小巧，不会给项目增加过多的负担。这使得它在性能敏感的应用中体现精彩，如移动应用或者对加载速度要求很高的网站。
      
    
    
  • 示例代码
    1. import {LitElement, html, css} from 'lit';
    2. import {customElement, property} from 'lit/decorators';
    4. @customElement('my - element')
    5. class MyElement extends LitElement {
    6.   static styles = css`
    7.     p {
    8.       color: blue;
    9.     }
    10.   `;
    11.   @property()
    12.   message = 'Hello World';
    13.   render() {
    14.     return html`
    15.       <p>${this.message}</p>
    16.     `;
    17.   }
    18. }

    复制代码
    在这个示例中，我们定义了一个名为MyElement的自定义元素。它有一个message属性，在render方法中，通过模板字面量将message属性的值渲染到一个<p>标签中。styles属性定义了组件的样式，这里将<p>标签中的文字颜色设置为蓝色。
    
  
  
• Stencil
  
  
  
  • 简介
    
    
    
    • Stencil是一个用于构建可重用、可扩展的Web组件的编译器。它允许开发者利用现代的JavaScript（包括Type - C、ES6等）和CSS来创建高性能的组件，并且可以输出为符合Web组件尺度的自定义元素。
      
    
    
  • 特点
    
    
    
    • 跨框架兼容性：Stencil组件可以在各种JavaScript框架中利用，如React、Vue、Angular等。这使得它在差别技术栈的项目中都能发挥作用。例如，一个用Stencil开发的组件可以被轻松地集成到一个React应用或者一个Vue应用中。
      
    • 性能优化：Stencil在编译过程中会对组件进行性能优化，包括静态分析和代码转换。它可以减少组件的大小，提高加载速度和运行效率。比如，它会自动去除未利用的代码，优化组件的渲染逻辑。
      
    • 强大的工具支持：它提供了一系列开发工具，如组件生成器、测试工具等。这些工具可以资助开发者更高效地创建和维护组件。例如，通过组件生成器可以快速地创建一个新的组件骨架，然后开发者可以在这个基础上进行功能开发。
      
    
    
  • 示例代码
    1. import { Component, Prop, h } from '@stencil/core';
    3. @Component({
    4.   tag: 'my - stencil - component',
    5.   styleUrl: 'my - stencil - component.css',
    6.   shadow: true
    7. })
    8. export class MyStencilComponent {
    9.   @Prop()
    10.   name: string;
    11.   render() {
    12.     return <div>Hello, {this.name}!</div>;
    13.   }
    14. }

    复制代码
    在这里，我们定义了一个Stencil组件MyStencilComponent。它有一个属性name，通过render函数将name属性的值渲染到一个<div>标签中。tag属性定义了组件的自定义元素名称，styleUrl指定了组件的样式文件，shadow属性表示是否利用影子DOM。
    
  
  
• Polymer
  
  
  
  • 简介
    
    
    
    • Polymer是Google开发的一个Web组件库，它提供了一种简单的方式来创建自定义元素和利用Shadow DOM。它已经存在了一段时间，并且在Web组件的推广和应用方面起到了重要的作用。
      
    
    
  • 特点
    
    
    
    • 丰富的生态系统：Polymer拥有一个相对成熟的生态系统，包括大量的组件示例、文档和工具。这使得开发者在遇到题目时可以很容易地找到办理方案或者参考示例。例如，在开发一个复杂的UI组件，如数据表格时，可以参考已有的Polymer数据表格组件的实现。
      
    • 与其他Google技术集成：它可以与其他Google技术（如Firebase）很好地集成。这对于开发需要后端服务支持的应用（如实时数据应用）非常方便。例如，利用Polymer和Firebase可以轻松地构建一个实时聊天应用的前端组件。
      
    • 易于上手：Polymer提供了一种简单直观的方式来创建和利用Web组件。它的语法相对简洁，对于初学者来说比较容易明确。例如，创建一个简单的自定义按钮组件只需要定义少量的代码。
      
    
    
  • 示例代码
    1. <link rel="import" href="bower_components/polymer/polymer.html">
    2. <dom - module id="my - polymer - element">
    3.   <template>
    4.     <style>
    5.       :host {
    6.         display: block;
    7.         background - color: lightblue;
    8.       }
    9.     </style>
    10.     <h2>My Polymer Element</h2>
    11.     <p>[[message]]</p>
    12.   </template>
    13.   <script>
    14.     Polymer({
    15.       is: 'my - polymer - element',
    16.       properties: {
    17.         message: {
    18.           type: String,
    19.           value: 'Hello, Polymer!'
    20.         }
    21.       }
    22.     });
    23.   </script>
    24. </dom - module>

    复制代码
    在这个示例中，我们通过dom - module定义了一个名为my - polymer - element的组件。在模板部门，我们定义了组件的样式和内部布局，包括一个<h2>标题和一个<p>段落。在脚本部门，我们利用Polymer函数来定义组件的属性，这里有一个message属性，它的默认值为Hello, Polymer!。
    
  
  
• Vaadin Components
  
  
  
  • 简介
    
    
    
    • Vaadin Components是一个基于Web组件尺度的UI组件库，它提供了丰富的企业级UI组件，用于构建高质量的Web应用。这些组件包括表单组件、数据可视化组件、布局组件等。
      
    
    
  • 特点
    
    
    
    • 企业级功能：Vaadin Components具有很多适合企业级应用的功能，如数据验证、国际化支持、可访问性等。例如，在一个企业级的表单组件中，可以方便地对用户输入进行验证，确保数据的精确性。
      
    • 主题定制：它提供了丰富的主题定制选项，允许开发者根据自己的需求调解组件的外观。这对于保持应用的品牌一致性非常重要。比如，可以通过简单的配置改变组件的颜色、字体等样式，以匹配企业的品牌形象。
      
    • 与Vaadin框架集成：如果开发者利用Vaadin框架，Vaadin Components可以很好地与之集成，提供无缝的开发体验。例如，在一个Vaadin应用中，可以直接利用Vaadin Components来构建用户界面，提高开发效率。
      
    
    
  • 示例代码
    1. <vaadin - button id="my - button">Click me</vaadin - button>
    2. <script>
    3.   const button = document.getElementById('my - button');
    4.   button.addEventListener('click', () => {
    5.     alert('Button clicked!');
    6.   });
    7. </script>

    复制代码
    这里我们利用了Vaadin Components中的vaadin - button组件。通过JavaScript代码，我们为这个按钮添加了一个点击变乱监听器，当用户点击按钮时，会弹出一个告诫框。
    
  
  

发展前景

• 尺度化上风与跨平台潜力
  
  
  
  • Web Components是W3C尺度的一部门，这赋予了它强大的生命力。浏览器厂商对尺度的支持不停在不停加强，如Chrome、Firefox、Safari等主流浏览器都已经提供了对Web Components主要技术（Custom Elements、Shadow DOM和HTML Templates）的支持。这种尺度化使得基于Web Components开发的组件在差别浏览器环境下具有更好的兼容性，减少了因浏览器差异导致的开发困难。
    
  • 随着移动设备和各种新型智能终端（如智能手表、智能电视等）的普及，Web应用需要能够在多种平台上运行。Web Components的跨平台特性使其能够轻松地将组件摆设到差别的设备和平台上。例如，一个利用Web Components构建的UI组件库，可以在桌面浏览器、移动浏览器以及其他支持HTML的设备上保持一致的功能和外观，开发者无需为每个平台单独开发组件。
    
  
  
• 组件化开发趋势的契合
  
  
  
  • 在现代软件开发中，组件化开发是一个主流趋势。Web Components技术完全符合这一趋势，它允许开发者将复杂的用户界面和功能拆分成独立的、可复用的组件。这不仅提高了代码的可维护性，还促进了团队协作。差别的团队成员可以专注于开发差别的组件，而不用担心相互之间的干扰。
    
  • 对于大型项目和企业级应用来说，组件化的Web Components可以资助构建一个高效的开发架构。例如，在一个电商应用中，可以有产物展示组件、购物车组件、用户评论组件等，这些组件可以由差别的团队开发，然后组合在一起形成完备的应用。而且，当需要更新某个组件时，只需要在组件的代码库中进行修改，而不会影响到整个应用的其他部门。
    
  
  
• 在微前端架构中的关键作用
  
  
  
  • 微前端是一种新兴的架构模式，它将一个大型的前端应用拆分成多个小型的、独立的微应用。Web Components技术为微前端架构提供了理想的技术支持。每个微应用可以被封装成一个Web Component，然后在主应用中进行集成。
    
  • 这种方式使得差别的团队可以独立开发和摆设自己的微应用，同时又能够包管整个应用的一致性和稳定性。例如，一个金融服务公司的前端应用可以由账户管理微应用、金融产物保举微应用、交易记录微应用等构成，这些微应用通过Web Components集成在一个统一的用户界面中，为用户提供完备的服务。
    
  
  
• 与框架的融合与互补
  
  
  
  • 只管有很多盛行的前端框架（如React、Vue、Angular等），但Web Components技术并不是与之竞争的关系，而是可以相互融合和互补。Web Components可以作为这些框架的底层基础，为它们提供更加原生、高效的组件化本事。
    
  • 例如，在React应用中，可以将Web Components作为自定义的React组件来利用，这样既可以利用React的状态管理和虚拟DOM等上风，又可以发挥Web Components的封装性和跨框架兼容性。这种融合为开发者提供了更多的选择，他们可以根据项目标具体需求灵活地选择技术组合。
    
  
  
• 性能优化与可访问性提升
  
  
  
  • Web Components的Shadow DOM技术可以有效地隔离组件的样式和DOM布局，减少样式辩论和不必要的DOM利用，从而提高应用的性能。通过将组件的内部布局封装在Shadow DOM中，浏览器可以更好地对其进行优化，例如，在渲染和更新组件时，只需要处理与该组件相关的DOM部门，而不会影响到整个页面的DOM树。
    
  • 在可访问性方面，Web Components可以遵循尺度的HTML语义和可访问性规则进行设计。这使得开发出来的组件能够更好地被屏幕阅读器等辅助工具识别，为残障人士等特殊用户群体提供更好的用户体验。例如，一个带有精确语义标签的Web Component可以让视障用户通过屏幕阅读器精确地明确组件的功能和内容。
    
  
  
• 面对的挑战与限定
  
  
  
  • 只管Web Components技术有诸多上风，但它也面对一些挑战。首先，它的学习曲线对于一些初学者来说可能比较陡峭，尤其是涉及到Shadow DOM和自定义元素的高级特性时。开发者需要掌握一定的Web技术知识，包括HTML、CSS、JavaScript以及相关的浏览器尺度。
    
  • 其次，虽然主流浏览器已经支持Web Components，但在一些旧版本浏览器中可能还存在兼容性题目。这就需要开发者考虑如何在不支持的浏览器中提供降级方案，或者利用一些工具来进行兼容性处理。另外，与现有的前端框架相比，Web Components在生态系统（如插件、工具链等）方面还不够丰富，这在一定水平上限定了它的快速推广和应用。
    
  
  

相关文献

官方网站

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。