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

我刚刚开始学习HTML自定义元素，通过阅读一系列介绍、教程和文档，我认为我对它的工作原理有了很好的了解，但我有一个哲学问题，即如何正确使用

标记

自定义元素使您能够封装新功能，简化HTML文档的结构，并允许您简单地插入

..

标记，而不是

..

然后，元素的类定义设置该元素的结构和功能。然后，一系列教程介绍了如何使用

..

和

..

设置自定义元素的内容。然后，您必须在要使用元素的每个HTML文档中包含模板代码，而不是在自定义元素类的构造函数中设置它。这难道不违背这样一个事实：自定义元素有助于简化和封装功能，使其更具可移植性？或者我是否误解了模板在文档中的正确使用和/或位置

综上所述，我能找到的最接近解决这个问题的方法是：

但答案基本上回避了这一点，并说“不要使用

”，因此并没有真正消除我的困惑。

实际上

元素可以通过从另一个文档导入，以及定义自定义元素的Javascript代码：

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

2019年更新

---

HTML导入。然后，您应该使用上面列出的其他解决方案（polyfill、备用模块加载器、JS

import

，或使用

fetch

直接下载）。

免责声明：我是下面提到的库的作者

在对自定义元素进行了一段时间的实验之后，最近提出了一个完全基于这些元素的全面项目，我想分享我对这方面的见解：

• 任何微小的组件都有可能长成某种野兽
• 它的HTML部分可能会增长到这样一个程度：将其保存在JS中非常不方便
• do使用模板，构建和解析一次，然后从该点克隆并注入到影子根中-这与使用文档片段而不是变异活DOM是相同的最佳实践
• 如果模板内容应该在组件的实例之间更改—可能会使用某种数据绑定框架，并且如果对这些内容采取最低限度的方法—处理从模板克隆的文档片段可能比处理字符串或模板文本更容易、更有效

为了避免重复写几十行相同的内容，我准备了一个库，它：

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

---

谢谢，我不知道HTML导入，听起来是正确的解决方案。但是由于缺乏支持，我认为您提倡使用模板文本字符串，这对吗？如果是这样的话，我仍然有一个问题：为什么不在自定义元素的JS类中以编程方式构建元素？在我看来，在JS中包含一大块HTML作为字符串是不必要的复杂化。HTML导入是正确的解决方案。。。直到9月谷歌宣布将不推荐该功能（）。实际上，我提倡HTML导入（使用polyfill），但现在…：-（作为开发者和设计师，我认为使用HTML文档来代替模板是比模板文字更好的做法，但是来自谷歌、尤其是Mozilla和Apple的人似乎还有其他兴趣…有些人不在正确的位置：2018，世界上第一个平板电脑仍然没有进口特征。你能相信吗？有趣。谢谢你的帮助！我倾向于以编程方式构建东西。与调用JS文件中其他地方的模板文本字符串相比，将构建自定义元素的组件与实现它的类进行合并似乎对我来说更具可读性。但也许这只是因为我最初是这样做的在C++/Java背景下，不允许将大量数据或内容放在一个大字符串中。@Supersharp您是在“template.HTML”中定义一个完整的HTML文件，还是仅定义按钮等HTML元素？@J.Doe仅定义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
            }
        } )
    )