Menu
I'd been reading but I don't find anything if is it possible define in a different html file and import with ESModule to use with shadowRoot, could be?
index.html, where I define2 javscript modules and use my component <hello-world></hello-world>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Component</title>
<meta name="description" content="My First Component">
<meta name="author" content="Ismael Rodriguez">
<script type="module" src="js/my-template.js"></script>
<script type="module" src="js/component.js"></script>
<!--
<template id="my-template">
<h2>Hello World</h2>
</template>
-->
</head>
<body>
<h1>Web Component</h1>
<hello-world></hello-world>
</body>
js/my-template.js, In this module only export a string which has tags html.
export const template = `
<style>
h3 {
color: red;
font-family: helvetica;
}
</style>
<h3>Hello World</h3>
`;
js/component.js, Finally import the module my-template.js. I have found this way to interpret the template from my module using ESmodule. How Could I import the template and use in my component (with firefox support)?
import {template} from './my-template.js';
class HelloWorld extends HTMLElement{
constructor(){
super();
let shadowRoot = this.attachShadow({mode: 'open'})
const t = this.createTemplate(template);
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
/*console.log(template);
const t = document.querySelector('#my-template');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);*/
}
createTemplate(html){
const template = document.createElement('template');
html = html.trim();
template.innerHTML = html;
return template;
}
}
window.customElements.define('hello-world',HelloWorld);
436
For example: ES2015 introduced ‘Template Literals’. They allow us to do this instead: The back ticks define the contents as a template literal and then we can interpolate values from elsewhere in JavaScript using the $ {} pattern. Anything inside the curly braces, which in turn are within the backticks, are evaluated and then inserted as a string.
You can tag your template literals with a function that will be called and can act as a kind of preprocessor on the content of the template literal. Here’s a typical example of a template literal:
Again this is inside an existing template literal. With a template literal it is possible render in part of the resultant string by way of another function. So, in our example, suppose we want to render out an average of the scores received by users.
You can only import Javascript files as ES6 Modules.
If you wan to import a element, you'll need to put it a Javascript file, for example by using a template literal string.
template.js:
export var template = `<template>
<h1>Content title</h1>
<div>Content</div>
</template>`
But it doesn't make sense. Instead you could define the content template directly.
templates.js:
export var literal1= `
<h1>Content title</h1>
<div>Content</div>
`
index.html:
<div id=host></div>
<script type="module">
import * as templates from './templates.js'
host.attachShadow( {mode:'open'} )
.innerHTML = templates.literal1
</script>
Alternatly, if you want to keep your DOM element in a HTML file, you can use fetch() to import a file, as demonstrated by the code snipped in this post about HTML Imports.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
