3

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

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

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

4

2 回答 2

2

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

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

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

例子

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

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

这个Shadow DOM掩盖了原始 DOM，但可以通过标签显示有用的值（这里： #prefix和#name元素） 。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 } )
}
<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>

于 2016-02-28T01:25:05.037 回答
2

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

模板标签

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

内容标签

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

自定义元素标签

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

于 2016-02-26T15:41:43.723 回答