或者，如果您想将 DOM 元素保留在 HTML 文件中，您可以使用 fetch() 导入文件，如 这篇关于 HTML 导入的博文.
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>
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);
解决方案
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.
