javascript - 无需在 Javascript 中编写 HTML 的 Web 组件

Question

据我所知，我一直在阅读和尝试一些可用的 Web 组件实现，我不喜欢的是它们在 Javascript/JSX/Typescript 中为组件编写 HTML 代码。

我经历过的框架/实现:

Polymer:Polymer 1 和 2 感觉不错，因为它们使用 HTML 导入完成所有定义，并且 HTML 和 JS 代码分开。但是，对于 Polymer 3，它们也将采用类似 React 的语法，在我不喜欢的 JS 中编写 HTML。

Vanilla Webcomponents:令人惊讶的是，即使是 vanilla web 组件规范也像在 JS 代码中包含 HTML 的 React:https://www.webcomponents.org/introduction这又是我不喜欢的事情。

Stencil:虽然这个工具看起来很有前途，但我仍然有同样的问题，我必须在 JS 中编写组件所需的 HTML，然后将其转换为 vanilla JS。

X-Tag:同样的问题，HTML inside JS。

是否有我们不在 Javascript 中编写 HTML 来使用 Web Components 的实现？

这背后的主要原因是关注点分离，我无法很好地理解它，因为传统上 web 似乎很好地将骨架、样式和 DOM 主要元素分离为 HTML、CSS 和 JS 文件现在，我们将所有东西组合在一起，这让我感觉很乱。

这也是我不喜欢 React 的主要原因之一，因为我们在 javascript 中编写了类似 HTML 的语法。

Answer 1

使用普通 Web 组件，您可以决定将 HTML、Javascript 和 CSS 分离到不同的文件中。由你决定!

我开发了一些完整的应用程序，其中每个组件(自定义元素)都使用 3 个文件定义:HTML、JS 和 CSS。

HTML 内容放在 <template> 中元素，并克隆以在创建自定义元素时将其插入。

HTML 文件可以在运行时通过 HTML 导入或使用 fetch() 导入或 XMLHttpRequest目的。或者，它可以在构建时(自动)与 Javascript 和 CSS 合并，只构成一个要下载的文件。

我不知道其他框架，但我想对于其中一些框架来说，这也是可能的。