Javascript 区别于；模板"；标签；内容“；HTML中的标记和自定义元素标记

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

但我们有三种不同类型的标签，它们都做着同样的事情：以更结构化的方式定义内容，以便于展示。我们能把它们的一些机制组合成更少的标签吗

---

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

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

模板标签

模板标记就是它听起来的样子，它定义了一个模板。浏览器可以识别这些标记，因此不会渲染或处理这些标记。这种行为对于模板的工作方式非常重要，因为它们可能包含脚本、CSS和HTML，在模板被“压印”到页面上之前，这些内容都不能也不应该执行

内容标签

内容标记是模板中的插入点。如果你想一个HTML模板作为一个HANDALBAR.JS模板，你可以考虑内容标签类似于把手本身（<代码> {{MyCyt}} <代码>）。它们定义了模板和数据在标记后如何“合并”

自定义元素标记

自定义元素标记不可能与上述元素合并，因为它们的行为几乎完全未定义。作为开发人员，它们对您来说是一块空白板。您可以创建一个自定义元素标记，该标记显示模式，或者没有布局，但包含用于更复杂行为的API。

，元素是互补的。它们可以一起使用，也可以分开使用

要定义

自定义元素
标记的UI：

在创建时，定义一个
应用
模板
标记的内部HTML
使用
模板内的
内容
标记
从原始DOM获取数据值
示例

当您（单击按钮）注册
自定义hello
元素时，浏览器将通过调用
createdCallback
方法在
div
中实例化该元素

在
createdCallback
中，HTML模板被添加到影子DOM根目录中

这个影子DOM屏蔽了原始DOM，但可以通过
content
标记显示有用的值（这里是#prefix和#name元素）


register.onclick=函数（）
{  
var proto=Object.create（HTMLElement.prototype）
proto.createdCallback=函数（）
{
var root=this.createShadowRoot（）
root.innerHTML=document.querySelector（“模板”）.innerHTML
}
registereElement（“自定义hello”，{prototype:proto}）
}

你好
注册自定义hello
自定义你好：
错过
凯特
30