javascript - 使用带有 HTML 自定义元素的模板

Question

我刚刚开始学习 HTML 自定义元素，通过阅读一系列介绍、教程和文档，我认为我已经很好地掌握了它的工作原理，但我对正确使用方法有一个哲学问题或者不使用 <template>标签。

自定义元素使您能够封装新功能，简化 HTML 文档的结构，并允许您简单地插入 <my-custom-element>...</my-custom-element>标记而不是 <div class="my-custom-element"><span class="part1">...</span><span class="part2">...</span></div> .

元素的类定义然后设置该元素的结构和功能。一堆教程然后描述了如何使用 <template>...</template>和 <slot>...</slot>设置自定义元素的内容。然后，您必须在每个要使用该元素的 HTML 文档中包含模板代码，而不是在自定义元素类的构造函数中设置它。这是否与自定义元素以一种使它们更便携的方式帮助简化和封装功能这一事实背道而驰？还是我误解了模板在文档中的正确用法和/或位置？

通过 SO，我能找到最接近解决这个问题的是这个问题:

How to stamp out template in self contained custom elements with vanilla js?

但答案基本上回避了这一切并说“不要使用 <template> ”，因此并没有真正消除我的困惑。

Answer 1

实际上 <template>可以通过 HTML Imports 从另一个文档导入元素，以及将定义自定义元素的 Javascript 代码:

<link rel="import" src="my-custom-element.html">
...
<custom-element></custom-element>

因此它不需要包含在每个 HTML 文档中。 This post shows a minimal example.

HTML 导入仅在 Chrome 和 Opera 中实现。如果你想在 Firefox 和 Safari 中使用它们，你需要使用 HTML Imports polyfill .

另一方面，目前，Mozilla 和 Apple 不打算在各自的浏览器中本地实现 HTML 导入。因此，他们建议使用纯 Javascript 模块(使用 import 或 <script src="..."> )定​​义自定义元素，并推广 template literals相反，字符串提供了一些优势(变量、函数)，但有时在 IDE 中编码更复杂(因为它们的字符串表示)。

也许在未来standard HTML modules将被所有浏览器采用，并且<template>将再次成为人们关注的焦点......

请注意，如果没有 HTML 导入，您仍然可以使用 fetch() 导入一些 HTML 文档。 :

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 导入 won't be supported natively after Chrome 73 .然后，您应该使用上面列出的其他解决方案(polyfill、备用模块加载器、JS import 或使用 fetch 直接下载)。