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

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

所以它不需要包含在每个 HTML 文档中。这篇文章展示了一个最小的例子。

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

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

也许将来所有浏览器都会采用标准的 HTML module，并<template>重新成为人们关注的焦点……

请注意，如果没有 HTML 导入，您仍然可以使用以下命令导入一些 HTML 文档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 年更新

在 Chrome 73 之后本机将不支持HTML 导入。然后，您应该使用上面列出的其他解决方案（polyfill、替代module加载器、JSimport或直接下载fetch）。

免责声明：我是下面提到的丰富组件库的作者。

在对自定义元素进行了一段时间的试验并最近提出了一个完全基于它们的完整项目后，我想分享我对此的见解：

• 任何微小的组件都可能成长为某种野兽
• 它的 HTML 部分可能会增长到将其保存在 JS 中非常不方便的程度
• 确实使用模板，构建和解析一次，从那时起克隆并注入影子根 - 这与使用文档片段而不是改变活动 DOM 的最佳实践相同
• 如果模板内容应该从组件的实例更改为实例 - 可能会使用某种数据绑定框架，并且如果对这些框架采取极简主义的方法 - 处理从模板复制的文档可能仍然更容易和更高效片段而不是对字符串或模板文字进行操作

为了不一遍又一遍地写同样的几十行，我准备了丰富的组件库，它：

• 标准化一些用于模板配置的 API 以及所有那些“克隆模板、创建阴影、将模板的内容注入其中”的重复代码行
• 已知在提供 html URL 时获取 html 内容
• 缓存模板，以便获取只完成一次