模板与HTML自定义元素的使用 [英] Use of Template with HTML Custom Elements
问题描述
我刚刚开始学习HTML自定义元素，通过阅读一系列介绍，教程和文档，我想我对它的工作方式有很好的处理，但我对正确的使用方法有一个哲学问题或者不使用< template> 标记。
I just started learning about the HTML custom elements, and through reading a series of intros, tutorials, and documentation, I think I have a good handle on how it works, but I have a philosophical question on the proper way to use or not use the <template> tag.
自定义元素使您能够封装新功能，简化HTML文档的结构，允许您只需插入< my-custom-element> ...< / my-custom-element> 标记，而不是< div class =my-custom-element>< span class =part1> ...< / span>< span class =part2> .. < /跨度>< / DIV> 。
Custom elements give you the ability to encapsulate new functionality, simplifying the structure of your HTML document, and allowing you to simply insert a <my-custom-element>...</my-custom-element> tag instead of <div class="my-custom-element"><span class="part1">...</span><span class="part2">...</span></div>.
然后，元素的类定义设置该元素的结构和功能。然后，一堆教程描述了如何使用< template> ...< / template> 和< slot> ...< ; / slot> 设置自定义元素的内容。然后，您必须在每个要在其中使用元素的HTML文档中包含模板代码，而不是在自定义元素类的构造函数中进行设置。这是否与自定义元素有助于简化和封装功能以使其更具可移植性这一事实相反？或者我是否误解了文档中模板的正确用法和/或位置？
The class definition for the element then sets up the structure and functionality of that element. A bunch of the tutorials then describe how to use <template>...</template> and <slot>...</slot> to set up the contents of the custom element. You would then have to then include the template code in every HTML document in which you want to use the element rather than setting it up in the custom element class's constructor. Doesn't this run counter to the fact that custom elements help simplify and encapsulate functionality in a way that makes them more portable? Or am I misunderstanding the proper usage and/or placement of the template within the document?
通过搜索SO，我能找到最接近解决这个问题的是这个问题：
Looking through SO, the closest I can find to addressing this is this question:
但答案基本上避开了这一切，并说请勿使用< template> ，所以并没有真正解决我的困惑。
But the answer essentially sidesteps this all together and says "Don't use <template>," and so doesn't really clear up my confusion.
推荐答案
其实 < template> 元素可以通过从其他文档导入HTML导入，以及定义自定义元素的Javascript代码：
Actually <template> elements can be imported from another document via HTML Imports, along with the Javascript code that will define the custom element:
<link rel="import" src="my-custom-element.html">
...
<custom-element></custom-element>
所以它不需要包含在每个HTML文档中。 此帖显示了一个最小的示例。
So it doesn't need to be included in a every HTML document. This post shows a minimal example.
HTML导入已实施仅限Chrome和Opera。如果你想在Firefox和Safari中使用它们，你需要使用 HTML Imports polyfill 。
HTML Imports are implemented only in Chrome and Opera. If you want to use them in the with Firefox and Safari you'll need to use the HTML Imports polyfill.
另一方面，目前，Mozilla和Apple并不打算在各自的浏览器中本地实现HTML Imports。因此，他们建议使用纯Javascript模块定义自定义元素（使用 import 或< script src =...> ），并宣传模板文字字符串相反，它提供了一些优点（变量，函数），但有时在IDE中编码更复杂（因为它们的字符串表示）。
On the other hand and for the moment, Mozilla and Apple don't intend to implement HTML Imports natively in their respective browsers. Therefore they recommend to define custom elements with pure Javascript modules (with import or <script src="...">), and promote template literals strings instead, which offer some advantages (variables, functions), but are sometimes more complicated to code in an IDE (because of their string representation).
可能在将来< a href =https://github.com/dglazkov/webcomponents/blob/html-modules/proposals/HTML-Imports-and-ES-Modules.md =nofollow noreferrer>标准HTML模块将被所有浏览器采用，< template> 将成为焦点......
Maybe in the future standard HTML modules will be adopted by all browsers, and <template> will come back in the spotlight...
注意如果没有HTML Imports，您仍然可以使用 fetch（）自行导入一些HTML文档：
Note that without HTML Imports you can still import yourself some HTML documents with fetch():
fetch( "template.html" )
.then( stream => stream.text() )
.then( text =>
customElements.define( "c-e", class extends HTMLElement {
constructor() {
super()
this.attachShadow( { mode: 'open'} )
.innerHTML = text
}
} )
)
更新2019
HTML导入在Chrome 73之后将不会原生支持。然后，您应该使用上面列出的其他解决方案（polyfill，备用模块加载器，JS import ，或者直接下载 fetch ）。
HTML Imports won't be supported natively after Chrome 73. You should then use the other solutions listed above (the polyfill, an alternate module loader, JS import, or a direct download with fetch).
这篇关于模板与HTML自定义元素的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
