javascript-HTML中的“模板”标签,“内容”标签和自定义元素标签之间的区别

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

但是我们有3种不同类型的标签都在做相同的事情：以更结构化的方式定义内容以便于展示.我们可以将它们的某些机制组合到更少的标签中吗？

如果能够给出关于Web工程中遵循的编程习惯和设计模式的模板标签,内容标签和自定义元素标签的作用的解释,那就太好了.

解决方法:

三种标签类型有很大不同,因此不应将其组合.

模板标签

模板标签就是它的模样,它定义了模板.这些标签可被浏览器本身识别,因此不会呈现或处理.该行为对于模板的工作方式极为重要,因为它们可能包含脚本,CSS和HTML,并且在模板“压印”到页面上之前,这些东西都不能执行或不应执行.

内容标签

内容标签是模板中的插入点.如果您将HTML模板视为handlebars.js模板,则可以认为content标签类似于handlebars本身({{mycontent}}).它们定义了一旦加盖模板和数据将如何“合并”.

自定义元素标签

自定义元素标记无法与上述内容合并,因为它们的行为几乎是完全未定义的.对于开发人员来说,它们是空白.您可以创建一个显示模式的自定义元素标签,或者没有布局,但包含用于更复杂行为的API.

标签：custom-element,html5-template,html,javascript,design-patterns
来源： https://codeday.me/bug/20191027/1943387.html