possível importar a tag do modelo com o ES201
Eu estava lendo, mas não encontro nada, se é possível definir em um arquivo html diferente e importar com o ESModule para usar com o shadowRoot, poderia se
index.html, onde defino2 módulos javscript e uso meu 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, Neste módulo, exporte apenas uma string que possua tags html.
export const template = `
<style>
h3 {
color: red;
font-family: helvetica;
}
</style>
<h3>Hello World</h3>
`;
js / component.js, Finalmente importe o módulomy-template.js
. Eu encontrei esta maneira de interpretar o modelo do meu módulo usando ESmodule. Como eu poderia importar o modelo e usá-lo no meu componente (com suporte ao 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);