Web Components 概述：何时不用它
Web Components 是一种用于创建可复用 Web 应用程序组件的技术。它被视为未来 Web 开发的趋势之一，因为它可以提供更丰富和复杂的应用程序，同时提高代码复用性和可维护性。然而，使用 Web Components 并不总是适合每个项目或每个开发者的。
什么是 Web Components？
Web Components 是构建 Web 应用程序组件的一种技术集合。它由三个主要技术组成：
- 自定义元素
自定义元素允许您创建新的 HTML 标签，同时为它们添加行为和样式。这些元素可以在任何页面上使用，例如 index.html、blog.html、about.html 等。
- Shadow DOM
Shadow DOM 是一种使组件更加封装的技术。它将组件内部的信息与外部 HTML 分离，这样组件内部的样式和代码就不会影响其他页面的内容。
- HTML Imports
HTML 导入使创建 Web Components 更加方便。它使您能够将多个 Web Components 组合在一起，或使用其他人创建的 Web Components。
何时不使用 Web Components？
尽管 Web Components 是一种有用的技术，但并不总是适用于每个项目或每个开发者。以下是一些情况，当你不应该使用 Web Component：
- 小型项目
Web Components 可以提高组件可重用性和可维护性，但如果您的项目很小，您可能并不需要将所有组件封装到 Web Component 中。在这种情况下，简单的 JavaScript 函数或对象可能会更好。
- 旧浏览器
Web Components 基于一些较新的 Web 标准，例如 Shadow DOM / Custom Elements 等,可能在旧版本的浏览器中不支持。在您的受众浏览器选择中考虑到这些问题，并确保您使用的 Web Component 技术可以在您的目标浏览器中正常运行。
- 缺乏维护
Web Components 在初次尝试时可能会比使用其他框架或库更加困难。如果您不打算维护您的项目，那么使用像 Web Components 这样的技术可能不是最佳选择。
总结
Web Components 是一种强大的技术，可以使 Web 应用程序更加可重用和可维护。然而，不适合每个项目。在选择 Web Components 之前，请考虑您的项目需求和个人经验。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ---------- ---------- ------- ---------------------------------------------------------------------------------------------------- ----- ------------ ----------------------- ------- ------ ------------------------- ------- -------
-- -------------------- ---- -------
----------- ----------------
----------
-------
------ -
---------- -----
-------- ----
-
--------
------- -------------------------------------------
-----------------------------
-----------
--------
----- --------- ------- --------------- -
------ --- ---- - ------ ------------- -
------ --- ------------ -
------ -
--------- -
----- -------
------ -
-
-
-
------------------- -
----------------
-
-
----------------------------------- -----------
---------
-------------在这个示例中，我们创建了一个 Web Components，它有一个增量按钮和一个计数器。 MyCounter 继承了 Polymer.Element 基类，并实现了 _incrementCounter 方法。 on-click 属性将按钮单击事件绑定到 _incrementCounter 方法。
这个示例中，我们使用 Polymer 库作为实现 Web Component 规范的框架。 但是，您也可以使用自定义元素原生 API 或其他 Web Component 框架，例如 Stencil 或 LitElement。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647aa3e6968c7c53b0652e9f