Vanilla web-component structure

Asked 19/9, 2016 at 15:34 Answered 22/4, 2021 at 9:38

Solved javascript web-component custom-element html5-template html5-import

I am looking into structuring vanilla web-components. I have previously used Polymer and like the fact that you can have the template, styles and JavaScript in one file for your component. I want to achieve this with 'vanilla' web components if possible but can't work out how. I've taken the code from here and added it to a file which I am using as follows:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Component test</title>
    
    <link rel="import" href="x-foo-from-template.html">
  </head>
  <body>
    <x-foo-from-template></x-foo-from-template>
  </body>
</html>

This fails because when we try to select the template it does not exist because at that point the template is not in the DOM (right?).

Is there any way to achieve this? I personally prefer this approach to creating the HTML in the JavaScript using document.createElement.

Kerch answered 19/9, 2016 at 15:34 Comment(0)

There are 2 main methods to get the template from the imported document:

1. From the import property of the <link> element

The <link rel=import> elements own an import property that contains the imported document. You can perform a querySelector call on it to fetch the <template>:

var doc = document.querySelector( 'link[href$="x-foo-from-template.html"]').import
var template = doc.querySelector( 'template' )

Then import the template in the custom element (or in its Shadow DOM) using either importNode() or cloneNode().

2. From the ownerDocument property of currentScript

When a script is parsed, the global value document.currentScript references the script being parsed, and therefore its propery ownerDocument is a reference to the document that owns the script. You can perform a querySelector call on it:

var template = document.currentScript.ownerDocument.querySelector( 'template' )

Note: the currentScript value is set temporarily, so it won't work any more in subsequent calls, like connectedCallback() or attachedCallback(), so you'll have to memorize it in a persistent variable at parse time, to reuse it later when needed.

Misericord answered 20/9, 2016 at 7:41 Comment(4)

Thanks for this answer. Shame I can't do it exactly how I want but this will do! – Kerch 21/9, 2016 at 8:31

What do you want exactly? Maybe I could improve my answer. – Misericord 21/9, 2016 at 9:16

A note, if you're using <script type="module"> the only non-hacky way to do it is #1 from above as document.currentScript is null per the spec. – Pentobarbital 13/10, 2018 at 17:47

Sorry for commenting on an old answer, but why wouldn't document.querySelector( 'template' ) be the same as document.currentScript.ownerDocument.querySelector( 'template' )? – Chivers 21/9, 2022 at 6:26

For latecomers:

As of 2021, HTML imports feature has been deprecated (MDN Link).

I would not recommend it, you can instead: create a template tag with a data- attribute to html imports. Write a script that runs on all those elements with that attribute and access those html parts using fetch() in the script, add that fetched import to the template tag and use it eg: template.content.cloneNode( true ).

Chunky answered 22/4, 2021 at 9:38 Comment(0)

As of 2021, HTML imports feature has been deprecated (MDN Link).

Recommended topics

Hot tags