Use of Template with HTML Custom Elements

by

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="https://stackoverflow.com/questions/52435955/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 recommend to define custom elements with pure Javascript modules (with import or <script src="https://stackoverflow.com/questions/52435955/...">), and promote template literals strings instead, which offer some advantages (variables, functions), but are sometimes more complicated 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 come 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).

More Related Contents:

  1. How to let imported css font / icons have effects on elements in the shadow dom?
  2. How to create new instance of an extended class of custom elements
  3. How to communicate between Web Components (native UI)?
  4. How to get element in user-agent shadow root with JavaScript?
  5. Is it possible to access Shadow DOM elements through the parent document?
  6. Nested element (web component) can’t get its template
  7. How to separate web components to individual files and load them?
  8. How to get children id when I click the parent?
  9. Scroll Function working in reverse order [closed]
  10. How do I programmatically set the value of a select box element using JavaScript?
  11. How can I change an element’s text without changing its child elements?
  12. Appending HTML string to the DOM
  13. Javascript Confirm popup Yes, No button instead of OK and Cancel
  14. Set custom HTML5 required field validation message
  15. Sound effects in JavaScript / HTML5
  16. HTML5 Local Storage fallback solutions [closed]
  17. How to get value of a div using javascript
  18. jQuery $(“#radioButton”).change(…) not firing during de-selection
  19. AngularJS: Better way to watch for height change
  20. Why don’t audio and video events bubble?
  21. Good Reasons why not to use Iframes in page content [closed]
  22. In AngularJS, any inline javascript code that included in HTML templates doesn’t work
  23. Is it possible to add html inside a title attribute?
  24. How to set custom validation messages for HTML forms?
  25. Trigger standard HTML validation (form) without using submit button? [duplicate]
  26. How to get CSS class property in Javascript?
  27. How to parse html to React component?
  28. XSS attacks and style attributes
  29. HTML5 File api, reading in an xml/text file and displaying it on the page?
  30. What’s the point of ?

Leave a Comment