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