Es posible importar la etiqueta de plantilla con ES2015?
Había estado leyendo pero no encuentro nada si es posible definirlo en un archivo html diferente e importarlo con ESModule para usar con shadowRoot, ¿podría ser?
index.html, donde defino 2 módulos javscript y uso mi componente<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, En este módulo solo se exporta una cadena que tiene etiquetas html.
export const template = `
<style>
h3 {
color: red;
font-family: helvetica;
}
</style>
<h3>Hello World</h3>
`;
js / component.js, Finalmente importe el módulomy-template.js. He encontrado esta manera de interpretar la plantilla desde mi módulo usando ESmodule. ¿Cómo podría importar la plantilla y usarla en mi componente (con soporte de firefox)?
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);