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.
There are 2 main methods to get the template from the imported document:
1. From the
importproperty of the<link>elementThe
<link rel=import>elements own animportproperty that contains the imported document. You can perform aquerySelectorcall on it to fetch the<template>:Then import the template in the custom element (or in its Shadow DOM) using either
importNode()orcloneNode().2. From the
ownerDocumentproperty ofcurrentScriptWhen a script is parsed, the global value
document.currentScriptreferences the script being parsed, and therefore its properyownerDocumentis a reference to the document that owns the script. You can perform aquerySelectorcall on it:Note: the
currentScriptvalue is set temporarily, so it won't work any more in subsequent calls, likeconnectedCallback()orattachedCallback(), so you'll have to memorize it in a persistent variable at parse time, to reuse it later when needed.