关于 Web 组件的 5 个问题

在本文中，我们将尝试回答以下与 Web 组件相关的问题：

1. 什么是网络组件？
2. webcomponents的一些基本原理是什么？
3. webcomponents 有哪些应用？
4. webcomponents 有哪些限制？
5. 简单的演示。

什么是 Web 组件？

简而言之，webcomponents 用于创建自定义 HTML 元素或扩展现有 HTML 元素（以适应您的自定义功能）。 Webcomponent 的 API 是默认 Web 平台 API 的一部分，它遵循现有的 Web 标准，这意味着 Web 组件可以在现代浏览器中工作，无需任何第三方。

webcomponents的一些基本原理是什么？

自定义元素 API：

一组原生 Javascript API（即：直接在浏览器中工作），允许开发人员定义自定义 HTML 元素或扩展现有元素。

1. 自定义元素可以定义如下：

CustomElement class with all the lifecycle events

Defining new tag name my-custom-element

2. 已连接回调 , 断开回调 , 采用回调 和 属性更改回调 是生命周期事件。阅读屏幕截图中的评论以获取详细信息。

3. 这个自定义元素可以像普通的 HTML 元素一样使用，如下所示：

4. 我们还可以通过定义自定义元素来扩展现有的 HTML 元素，如下所示：

Extending div to be used as my-custom-element

5.现在我们可以使用div如下 我的自定义元素 ：

Shadow DOM（文档对象模型）

独立于主 DOM 呈现的独立 DOM 树。 Shadow DOM 可以附加到主 DOM 中的任何节点。 Shadow DOM 允许单独编写自定义元素的脚本和样式，而不必担心与主 DOM 发生冲突。

1. ShadowDOM 包含红色方块内的所有内容。
2. 在 ShadowDOM 中定义的 CSS 不会影响外部的“普通 div”。同样，在主 DOM 中定义的 CSS 不会影响 ShadowDOM 中的 div。
3. 注意 ** #shadow-root（打开）** 它 ** __** 显示 ShadowDOM 是在开放模式下创建的。开放模式使 ShadowDOM 可以使用 DOM javascript API 从外部访问，如下所示：

shadow-root (open) screenshot

4. 如果ShadowDOM是在封闭模式下创建的，那么ShadowDom是唯一的。从自定义元素内部访问（即：msg-component），上面的命令将返回 无效的 ，如下所示：

shadow-root (closed) screenshot

HTML 模板