＆＃34;模板＆＃34;之间的区别标签，＆＃34;内容＆＃34; HTML中的标签和自定义元素标签

Question

我开始了解网络组件和聚合物。我知道有一些机制可以将内容与表示分开，这在动态呈现内容时非常重要。我也理解＆＃34;内容＆＃34;标签有助于通过选择需要呈现的内容（例如，某些HTML标签或ID或类中的内容等）来实现。但是，我觉得模板标签的使用也是将内容与表示分离，因此使用自定义元素标签时，演示文稿/渲染完全由JavaScript处理。

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

如果可以解释模板标签，内容标签和自定义元素标签的角色，与Web工程中遵循的编程习语和设计模式相关，那就太棒了。

Answer 1

三种标签类型非常不同，不应合并。

模板标签

模板标签恰如其分，它定义了一个模板。这些标记由浏览器识别，因此不会被渲染或处理。这种行为对于模板的工作方式非常重要，因为它们可能包含脚本，CSS和HTML，在模板被“标记”到页面上之前，这些内容都不能或不应该执行。

内容标记

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

自定义元素标记

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

Answer 2

Custom Elements，<template>和<content>元素是互补的。它们可以一起使用或分开使用。

为了定义custom-element代码的用户界面：

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

示例

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

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

此 Shadow DOM 会屏蔽原始DOM，但可以通过{{显示有用的值（此处为： #prefix 和 #name 元素） 1}}标签。

content

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 } )
}