javascript – 模板与HTML自定义元素的使用

我刚刚开始学习HTML自定义元素,并通过阅读一系列介绍,教程和文档,我认为我对它的工作方式有很好的处理,但我对使用或不使用的正确方法有一个哲学问题<模板>标签.

自定义元素使您能够封装新功能,简化HTML文档的结构,并允许您简单地插入< my-custom-element> …< / my-custom-element>标记而不是< div class =“my-custom-element”>< span class =“part1”> …< / span>< span class =“part2”> …< /跨度&GT&LT / DIV取代. 然后,元素的类定义设置该元素的结构和功能.然后,一堆教程描述了如何使用< template> …< / template>和< slot> …< / slot>设置自定义元素的内容.然后,您必须在每个要在其中使用元素的HTML文档中包含模板代码,而不是在自定义元素类的构造函数中进行设置.这是否与自定义元素有助于简化和封装功能以使其更具可移植性这一事实相反？或者我是否误解了文档中模板的正确用法和/或位置？

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

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

但答案基本上回避了这一切并说“不要使用<模板>”,因此并没有真正解决我的困惑.

解决方法:

实际上< 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 Imports.因此,他们建议使用纯Javascript模块定义自定义元素(使用import或< script src =“...”>),然后提升template literals字符串,这提供了一些优点(变量,函数),但有时更复杂在IDE中编码(因为它们的字符串表示).

也许在将来standard HTML modules将被所有浏览器采用,并且< template>将成为众人瞩目的焦点……

请注意,如果没有HTML Imports,您仍然可以使用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 Imports won’t be supported natively after Chrome 73.然后,您应该使用上面列出的其他解决方案(polyfill,备用模块加载器,JS导入或带有fetch的直接下载).

标签：javascript,html5,web-component,custom-element,html5-template
来源： https://codeday.me/bug/20190925/1816847.html