javascript - Use of Template with HTML Custom Elements - Stack Overflow

admin管理员组

文章数量:1244243

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.

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>.

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?

Looking through SO, the closest I can find to addressing this is this question:

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

But the answer essentially sidesteps this all together and says "Don't use <template>," and so doesn't really clear up my confusion.

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.

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>.

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?

Looking through SO, the closest I can find to addressing this is this question:

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

But the answer essentially sidesteps this all together and says "Don't use <template>," and so doesn't really clear up my confusion.

• javascript
• html
• web-ponent
• custom-element
• html5-template

Share Improve this question Follow edited Sep 29, 2018 at 21:50 Supersharp 31.2k1111 gold badges101101 silver badges147147 bronze badges asked Sep 21, 2018 at 2:53 bjg222bjg222 90611 gold badge1212 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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>

So it doesn't need to be included in a every HTML document. This post shows a minimal example.

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.

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 remend 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 plicated to code in an IDE (because of their string representation).

Maybe in the future standard HTML modules will be adopted by all browsers, and <template> will e back in the spotlight...

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
            }
        } )
    )

Update 2019

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).

Disclaimer: I'm an author of the rich-ponent library mentioned below.

After some time of experimenting with custom elements and recently raising a full blown project based solely upon them I'd like to share my insights on this:

• any ponent tiny as it is, is a candidate to grow to some beast
• HTML part of it may grow to a point where it is very non-convenient to keep it within JS
• do use template, built and parsed once and from that point cloned and injected into the shadow root - this is the same best practice as to use document fragment instead of mutating a living DOM
• if the template contents should be changed from ponent's instance to instance - some kind of data binding framework may be used, and if minimalist approach on those is taken - it might still be easier and more performant to deal with a cloned-from-template document fragment than operate on string or template literals

In order to not write the same dozens of lines over and over again I've prepared rich-ponent library, which:

• normalizes some API for template provisioning and all those 'clone template, create shadow, inject template's content into it' lines of repeating code
• known to fetch html contents when html URL is provided
• caches the templates so the fetch is done only once

本文标签： javascriptUse of Template with HTML Custom ElementsStack Overflow