Web 组件基础知识

什么是 Web 组件？

Web 组件是指四种 Web 标准，它们帮助我们制作可在网页和应用程序中使用的自定义、可重用和封装的 HTML 标签。
1.<template>元素：使用<template>元素，我们封装 HTML，然后使用 JavaScript 呈现它。

所以，模板元素会将 HTML 拆分开来。模板标签内的内容不会在加载时渲染。相反，JavaScript 会在函数调用时渲染。因此，页面加载速度会非常快，因为 HTML 中有一部分内容不会在加载时加载。我们还可以重用这些元素，从而节省大量时间。

2. 自定义元素：使用自定义元素，我们创建一个 javascript 类，然后将其链接到自定义 html 元素。

HTML 文档本身就包含默认的 HTML 元素，例如<body>等<header>。HTMLElement 类包含所有这些元素。我们在 JavaScript 文件中定义一个类，并使用该自定义类扩展 HTMLElement。接下来，我们定义一个自定义元素，并将其链接到我们的类。现在，我们可以在 HTML 中随意使用这个自定义元素。请注意自定义元素中的；这在创建自定义元素时非常重要，因为它可以将其与默认元素区分开来。

-

3. Shadow DOM：
使用 Shadow DOM 我们封装样式，以便将它们限制在特定区域内。

DOM，即文档对象模型，是文档元素（在我们这里指的是 HTML 元素）的树状结构。这里包含的代码和样式会相互影响。

另一方面，Shadow DOM 是一个独立的 DOM，其内部包含的代码与主 DOM 分离，因此它不会影响主 DOM 的代码。我们可以使用 JavaScript 将 Shadow DOM 附加到某个元素，它只会影响该元素。

4. JavaScript 模块：
我们可以通过导出 JavaScript 文件将其转换为模块。这样其他文件就可以将其作为依赖项导入。

模块是一个导出自身代码的文件。模块通常有其自己的作用域。因此，我们可以拥有一个具有不同功能的模块，以便人们可以与他人共享。例如，我们可以共享一个名为的模块mediaplayer，它可以播放媒体；或者另一个名为的模块whattimeisit，它可以显示不同时区的时间。Npmjs 是一个流行的包管理器，人们用它来共享模块。