javascript - HTML中 "template"标签、 "content"标签和自定义元素标签的区别

Question

我开始学习网络组件和聚合物。我知道有一些机制可以将内容与表示分开，这对于动态呈现内容很重要。我还了解到，“内容”标签通过选择需要呈现的内容(例如，某些 HTML 标签或 ID 或类等中的内容)来帮助实现这一点。但是，我觉得模板标签的使用也是将内容与表现分离，使用自定义元素标签也是如此，而表现/渲染完全由 JavaScript 负责。

但是我们有 3 种不同类型的标签都在做同样的事情:以更结构化的方式定义内容以便于呈现。我们能否将他们的一些机制组合成更少的标签？

如果能解释一下模板标签、内容标签和自定义元素标签的作用，以及与 Web 工程中遵循的编程习惯用法和设计模式的关系，那就太好了。

Answer 1

这三种标签类型非常不同，不应组合使用。

模板标签

模板标签顾名思义，它定义了一个模板。这些标签被浏览器识别，因此不会被渲染或处理。这种行为对于模板的工作方式极为重要，因为它们可能包含脚本、CSS 和 HTML，并且在模板被“标记”到页面上之前，这些东西都不能或不应该执行。

内容标签

内容标签是模板中的插入点。如果您将 HTML 模板视为 handlebars.js 模板，则可以将内容标签视为类似于 Handlebars 本身 ({{mycontent}})。它们定义模板和数据在标记后如何“合并”。

自定义元素标签

自定义元素标签不可能与上面的合并，因为它们的行为几乎完全未定义。作为开发人员，它们是一张白纸供您定义。您可以创建一个显示模态的自定义元素标签，或者没有布局但包含用于更复杂行为的 API。