有三种不同（但非常相似）的情况：
web components
它们应该是一个封装的 Web 片段。如果您愿意，它是<iframe>s 的更智能替代品。它的主要用例（以及它的设计目的）是在页面中显示广告并保证主机不会弄乱其内部逻辑和渲染。
custom elements
简单地说，这些就是声明和注册的自定义 HTML 标记。使用它们的好处是能够在任何外部框架中将它们标记为禁止使用，并说明： “此自定义元素不是您的自定义组件之一，请将其视为 HTML 标记”。
framework components
默认情况下，现代 JS 框架（Angular、React、Vue）在内部使用这种模式：它们的内部组件看起来像自定义元素（案例 2）。但他们不是。它们只是内部约定，从未进入应用程序的 HTML 标记输出。
以下是内部发生的情况：解析模板时，如果遇到未知的 HTML 元素，框架会假定它是其注册组件之一。如果是，则不呈现标签。该组件的一个新实例被创建，标签被替换为组件模板的内容（或其渲染函数的结果）。
所有上述框架，当遇到不是注册自定义组件的未知 html 标签时，将发出警告，如下所示“咦，你是不是忘记注册这个组件了？” . 除非它被注册为自定义元素（案例 2）——在这种情况下，他们将其视为：HTML 标记。
Vue 优雅地处理了上述所有问题。您为小部件选择的内容很大程度上取决于上下文和所需的最终结果。
以下是您的问题的答案：
- 我是否需要在这里考虑 Web 组件，或者这些小部件可以是我们以某种方式嵌入的实际 Vue 应用程序？
如果您希望能够根据上下文设置样式，则不应使用 Web 组件。
@vue/web-component-wrapper如果应该将小部件创建为 Web 组件，那么使用或vue-custom-element库之间有什么区别吗？
就在这里。@vue/web-component-wrapper生成 Web 组件（封装的 DOM 框架）。
vue-custom-elements声明和使用自定义元素（自定义 HTML 标记）。它们的内容是 HTML 标记（未封装）。使用自定义元素的优点是能够通知外部框架：不要将此自定义元素视为您自己的组件之一，它由其他东西处理（在我们的例子中是 Vue）。将其视为 HTML 标记。
- 无论我们选择哪个选项，我们都能充分利用您在任何普通 Vue 应用程序中使用的特性——Vue 路由器、用于状态管理的 Vuex 等（并且可以在这些小部件之间共享状态）？
是的。无论您选择哪个选项，您仍在使用 JavaScript（每个小部件/应用程序都可以不受限制地访问整个上下文）。您还可以将依赖项注入到您的小部件中，允许它们进行通信（通过修改相同的外部依赖项 - 路由器、状态管理模块等......）。这几乎是每个 Vue 实例正常运行的标准模式。简单来说，Vue（子）组件可以在没有父组件的情况下运行，本质上是一个 Vue 应用程序。（或者，如果您愿意，每个 Vue 应用程序都是一个 Vue 实例，并且它的所有子组件也是 Vue 实例）。
- 小部件是否需要完全样式化，或者将组件的所有样式留给父应用程序（或两者的组合）是否是最佳实践？
这完全是您的代码设计选择。在 Vue 中定义CSS 范围很容易。但是从上面的样式（DRY-er 代码）有很大的优势。此外，来自上下文的样式意味着应用较少的 CSS 规则，尽管这几乎不能算作性能问题。显然，考虑到第一个问题的答案。