首页 web前端 js教程 Web 组件:简介

Web 组件:简介

Jan 03, 2025 am 04:40 AM

在现代 Web 开发中,框架风靡一时。几乎所有现代框架都有组件的概念。 组件背后的想法是将前端逻辑分解为更小的可重用块,您可以跨页面或项目共享这些块。 一般来说,这些组件不能在其他框架中重用,并且需要一个构建过程来将它们编译为可以在浏览器中运行的 JavaScript。

如果我告诉你有一种方法可以使用普通 JavaScript 和广泛可用的浏览器 API 来构建组件,并且可以跨框架共享,你会怎么想? 现在,这已成为 Web 组件的现实。在这里,我们将快速浏览一下不同类型的 Web 组件,以及我们可以使用它们的一些功能。

Web 组件的基础知识

Web 组件是使用自定义元素注册表定义的。这是大多数现代浏览器提供的 API。要创建 Web 组件,您只需在代码中定义它,然后将其注册到自定义元素注册表中。使用正确的命名约定注册和定义后,该组件就可以在页面中使用。

customElements.define("my-component", MyComponentClass);
登录后复制
登录后复制
登录后复制

Web 组件的类型

Web 组件可以分为两个不同的类别。它们是自主 Web 组件自定义内置元素

自治 Web 组件 是通用 HTMLElement 类的扩展。这些组件通常更加灵活,因为您实际上是在构建自己的 HTML 元素,并且能够从头开始自定义所有行为。这包括用于渲染组件的根元素。 定义后,您可以像使用任何其他 HTML 元素一样使用自治 Web 组件。

<my-button>



<p><strong>Custom Built-In Elements</strong> extend specific HTML elements.  For example, you may extend the HTMLButtonElement class or the HTMLAnchorElement.  These are meant to augment the functionality of existing HTML elements. To use a Custom Built-In element, you use the "is" attribute on the HTML element you are augmenting to tell it that it is an instance of the Web Component.<br>
</p>

<pre class="brush:php;toolbar:false"><button is="my-button">



<h3>
  
  
  Naming Web Components
</h3>

<p>When defining a Web Component, there are certain conventions that must be followed.  </p>

<p>Generally you will name your components similar to HTML elements with your own prefix attached to keep things simple (i.e. <my-button>).  The basic rules require that the element name start with a lowercase letter, and it must include a hyphen.  These guidelines will get you by for most cases, but I would recommend looking at the HTML spec if you're curious about all rules.<br>


<pre class="brush:php;toolbar:false"><!--Valid-->
<my-button/>
<your-button/>

<!--Invalid-->
<My-button/>
<1234-button/>
<Mybutton/>
登录后复制

生命周期挂钩

Web 组件具有特定的生命周期挂钩,用于对组件经历的不同阶段做出反应。 钩子如下:

  • connectedCallback ->当组件附加到 DOM 时运行。
  • disconnectedCallback ->当组件与 DOM 分离时运行。
  • 采用回调 ->每次组件附加到新 DOM 时运行。
  • attributeChangedCallback ->当“observedAttributes”列表中的属性更新时运行。
class MyComponent extends HTMLElement {
    static observedAttributes = ["btntype"]
    connectedCallback() {
        // Handle when the component is attached to the DOM
    }
    disconnectedCallback() {
        // Handle when the component is removed from the DOM
    }
    adoptedCallback() {
        // Handle when the component is attached to a new DOM
    }
    attributeChangedCallback(name, oldValue, newValue) {
        // Trigged when the "btntype" attribute is changed since it is in the list of observedAttributes.
        // "name" will be the name of the attribute that changed.
        // "oldValue" is the value before the change.
        // "newValue" is the new value after the change.
    }
}
登录后复制

这些生命周期钩子用于执行创建/销毁组件实例时所需的任何初始化或清理工作。 attributeChangedCallback 特别有用,因为它允许对属性值更新做出反应。 Web 组件有一个特殊的静态属性,称为“observedAttributes”,它是一个属性名称(字符串)数组,将触发 attributeChangedCallback。

无障碍

可访问性是当今任何 Web 开发中的一个重要考虑因素。当涉及到 Web 组件时,您可以像在常规 HTML 或框架中一样使用 ARIA 属性,但一般来说,您将继承所使用的 HTML 元素的内置角色和辅助功能。

所有相同的准则都适用于这里和其他地方。例如,确保在构建组件时使用语义 HTML,添加可能需要的任何必要的键盘处理,并确保正确管理焦点和颜色对比度等内容。

影子 DOM

Shadow DOM 可能是 Web 组件中最令人困惑和争议的部分。 Shadow DOM 本质上是 DOM 的一个单独作用域的部分,位于 Web 组件

Shadow DOM 主要是自治 Web 组件所关心的问题,因为自定义内置元素只是添加到现有的 HTML 元素中。 对于自治 Web 组件,表示元素的自定义标签(即 )被视为“主机”元素。宿主元素内是“影子根”。阴影根内是渲染组件标记的位置。

这是一个示例,您将看到“my-button”元素作为宿主,其中包含 Shadow DOM。

Web Components: An Introduction

构建 Web 组件时,可以将 Shadow DOM 设置为两种模式。这些模式是“开放”和“封闭”。开放的 Shadow DOM 可以在 Light DOM 的 Shadow Root 之外使用 JavaScript 访问,而封闭的 Shadow DOM 则不能。

customElements.define("my-component", MyComponentClass);
登录后复制
登录后复制
登录后复制

您在 Shadow DOM 中定义的任何样式都在 Shadow DOM 范围内,并且不会污染文档的其余部分。 “Light DOM”(文档的其余部分)中定义的任何样式都不会穿透 Shadow DOM(CSS 变量是一个例外,但我们不会在这里讨论)。 现代浏览器确实提供了使用 CSS 使用部件直接从 Light DOM 定位 Shadow DOM 的方法。 您可以通过向标记添加部件属性来将部件添加到组件的 Shadow DOM。 然后可以使用 ::part 伪选择器在 CSS 中定位这些部分。 这非常方便,但本质上它非常有限。 您不能将子选择器与 ::part 选择器链接起来。您只能定位 Shadow DOM 中具有“part”属性的特定元素。

使用 Shadow DOM 时,可访问性也是一个重要的考虑因素。如果您曾经使用过 ARIA 属性,那么您就会熟悉“aria-scribedby”和“aria-labelledby”,它们通常会被赋予一个 ID,该 ID 引用另一个包含屏幕阅读器内容标签或描述的元素。 Shadow DOM 与样式类似,将 ID 的作用域分开,因此您无法从 Light DOM 引用位于 Shadow DOM 内的 ID,反之亦然。 当尝试提供需要动态提供的详细描述时,这可能会带来挑战,但存在解决方法,我们不会在本介绍中深入探讨。

模板和插槽

模板和槽是可以与 Shadow DOM 结合使用来增强 Web 组件的工具。模板用于在 Web 组件中创建可重用的片段,而插槽用于暴露可以传递来自 Light DOM 的内容的“洞”。

如果您需要在 Web 组件中反复渲染一段 HTML 片段,那么模板会很方便。它们也可以在 Web 组件之外使用,但用例更有限。它们是使用“模板”标签实现的。

槽用于将内容从 Light DOM 传递到 Web 组件,并使用“槽”标签实现。如果您有一个可能需要传入动态内容的通用组件,这会很方便。一个很好的例子可能是通用卡组件,您可以在其中公开一个插槽以将标记传递到卡的主体中。 插槽具有“名称”属性,您可以提供该属性来唯一标识插槽。如果您需要将多个插槽放入 Web 组件中,这会很方便。传递内容时,您只需传递一个值为 slot="your-slot-name" 的属性,内容就会传递到具有匹配名称的插槽。

插槽和 Shadow DOM 有一个值得注意的独特交互。 插槽可以具有在没有任何内容传入的情况下呈现的默认内容。传递到插槽的内容位于 Light DOM 中,并被“浅复制”到 Shadow DOM 中。 您可以在浏览器检查器中直观地看到这一点。槽内容将在 Web 组件内呈现,但在 DOM 中,技术上内容位于 Web 组件外部并提供槽的链接。

Web Components: An Introduction

话虽如此,这意味着所有插槽内容的样式和引用就像 Light DOM 中的任何其他内容一样。 Light DOM 中的样式会影响槽内容,而 Shadow DOM 样式则不会。 有一些 API 可用于与 Web 组件中的槽内容进行交互。

Web 组件支持

现代浏览器对 Web 组件的支持相当好。主要的例外是 Safari,它不支持自定义内置元素。 如果您需要支持 Internet Explorer 11 等旧版浏览器,则必须填充一些内容。

基本示例

现在我们已经简要介绍了所有基本概念,让我们看一些示例。

自主自定义元素

这是一个名为“my-button”的自治自定义元素示例:

customElements.define("my-component", MyComponentClass);
登录后复制
登录后复制
登录后复制

首先要注意的是代码大部分是相同的。最大的区别是我们直接扩展了 HTMLButtonElement,然后我们在定义自定义元素的时候也声明了我们扩展了按钮。

我们还花更少的时间编写渲染元素的代码。由于我们正在扩展 HTMLButtonElement,因此该组件只是一个具有额外功能的 HTML 按钮。 我们将使用 HTML“is”属性告诉 HTML 按钮它是“my-button”。

这是现场示例:

您会再次注意到我们使用“is”属性来增强现有的 HTML 按钮元素。 您还会注意到,就像使用自治自定义元素一样,我们可以附加事件侦听器并使用按钮,就像处理任何其他 HTML 元素一样,无论如何,这在这里更有意义,因为它实际上只是一个扩展的 HTML 按钮。

总结

Web 组件是解决创建可在不同页面和项目之间重用的可共享组件问题的一种普通方法。它们的工作方式更像普通的 HTML 元素,这可能会引起一些混乱,但最终它们非常有用,有助于解决现代框架所针对的许多相同问题。

在这里,我们对 Web 组件、围绕它们的不同概念进行了非常介绍性的研究,并通过一些快速示例展示了它们的基本功能。 从这里开始,我们可以开始更深入地研究如何使构建和使用它们变得更容易,并研究如何处理它们的一些痛点。

如果您有兴趣,请随时查看 GitHub 中的示例,也可以在 Code Pen 中使用它们。

  • 自治自定义元素示例
  • 自定义内置元素示例
  • 额外的基本模板示例!

在下一篇文章中,我们将了解如何扩展使用模板和槽,以及如何使渲染变得更容易。 请继续关注!

以上是Web 组件:简介的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1655
14
CakePHP 教程
1414
52
Laravel 教程
1307
25
PHP教程
1253
29
C# 教程
1228
24
神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

JavaScript的演变:当前的趋势和未来前景 JavaScript的演变:当前的趋势和未来前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

JavaScript引擎:比较实施 JavaScript引擎:比较实施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

JavaScript:探索网络语言的多功能性 JavaScript:探索网络语言的多功能性 Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

Python vs. JavaScript:学习曲线和易用性 Python vs. JavaScript:学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

如何使用Next.js(前端集成)构建多租户SaaS应用程序 如何使用Next.js(前端集成)构建多租户SaaS应用程序 Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

从C/C到JavaScript:所有工作方式 从C/C到JavaScript:所有工作方式 Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

如何安装JavaScript? 如何安装JavaScript? Apr 05, 2025 am 12:16 AM

JavaScript不需要安装,因为它已内置于现代浏览器中。你只需文本编辑器和浏览器即可开始使用。1)在浏览器环境中,通过标签嵌入HTML文件中运行。2)在Node.js环境中,下载并安装Node.js后,通过命令行运行JavaScript文件。

See all articles