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

Question

我开始学习Web组件和Polymer。我了解到有机制可以将内容与呈现分离，这在动态呈现内容时非常重要。我也知道“content”标签通过选择需要呈现的内容（例如，某些HTML标记、ID或类等）来帮助实现此目的。但是，我认为模板标签的使用也可以将内容与呈现分离，自定义元素标签的使用也是如此，而呈现/渲染完全由JavaScript处理。

但我们有三种不同类型的标签，都可以以更结构化的方式定义内容，以便于呈现。我们能否将它们的机制合并成更少的标签？

如果可以解释一下模板标签、content标签和custom-element标签在Web工程中遵循的编程惯例和设计模式方面的作用，那就太好了。

- np20

Answer 1

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

模板标签

模板标记就像它的名字一样，定义了一个模板。浏览器会将这些标记识别为模板，因此不会呈现或处理这些标记。这种行为对模板的工作方式非常重要，因为模板可能包含脚本、CSS和HTML，而这些都不能或不应该在模板"印章"到页面之前执行。

内容标签

内容标记是模板中的插入点。如果将HTML模板视为handlebars.js模板，则可以将内容标记视为handlebars本身({{mycontent}})。它们定义了模板和数据在"印章"后如何"合并"。

自定义元素标签

与上述标记相比，自定义元素标记几乎没有明确定义的行为，因此无法与其合并。作为开发人员，您可以定义一个空白的自定义元素标记。您可以创建一个自定义元素标记来显示模态框，或者没有布局但包含更复杂行为的API。

- Zikes

Answer 2

自定义元素、<template> 和 <content> 元素是互补的，它们可以一起使用也可以分开使用。

为了定义您的custom-element 标签的UI:

1. 在创建时定义 Shadow DOM，
2. 应用template标签的内部HTML，
3. 在template中使用content标签以从原始 DOM 中获取数据值。

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

在createdCallback中，将添加HTML模板到Shadow DOM根。

此Shadow DOM掩盖了原始DOM，但可以通过content标记显示有用的值（这里是#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>

- Supersharp