HTML中“模板”标签、“内容”标签和自定义元素标签之间的区别答案

【问题标题】：Difference between "template" tags, "content" tags and custom element tags in HTMLHTML中“模板”标签、“内容”标签和自定义元素标签之间的区别
【发布时间】：2016-06-09 21:12:19
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html design-patterns custom-element html5-template

【解决方案1】：

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

模板标签

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

内容标签

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

自定义元素标签

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

【讨论】：

【解决方案2】：

Custom Elements、<template> 和 <content> 元素是互补的。它们可以一起使用，也可以单独使用。

为了定义 custom-element 标签的 UI：

在创建时，定义一个Shadow DOM，
应用template标签的内部HTML，
在template 中使用content 标记，以便从原始 DOM 中获取数据值。

示例

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

在createdCallback 中，HTML 模板 被添加到 Shadow DOM 根目录中。

这个 Shadow DOM 掩盖了原始 DOM，但可以通过 @987654335 显示有用的值（这里：#prefix 和 #name 元素） @标签。

register.onclick = function () 
{  
  var proto = Object.create( HTMLElement.prototype )
  proto.createdCallback = function () 
  {
    var root = this.createShadowRoot()
    root.innerHTML = document.querySelector( "template" ).innerHTML
  }
  document.registerElement( "custom-hello", { prototype: proto } )
}

<template>
  <h3>
    Hello, <content select='#prefix'></content> <content select='#name'></content>!
  </h3>
</template>

<button id='register'>Register custom-hello</button>

<div>
  custom-hello:
  <custom-hello>
    <span id="prefix">Miss</span>
    <span id="name">Kat</span>
    <span id="age">30</span>
  </custom-hello>
</div>

【讨论】：