Чтобы взять пример @ Supersharp, еще один шаг - вот ваш код с улучшением:
ал, но я ничего не нахожу, если возможно определить в другом файле HTML и импортировать с ESModule для использования с shadowRoot, может быть?
index.htmlгде я определяю 2 модуля javscript и использую свой компонент<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В этом модуле экспортируется только строка с тегами html.
export const template = `
<style>
h3 {
color: red;
font-family: helvetica;
}
</style>
<h3>Hello World</h3>
`;
JS / component.js, Наконец, импортировать модульmy-template.js, Я нашел этот способ интерпретировать шаблон из моего модуля с помощью ESmodule. Как я могу импортировать шаблон и использовать его в моем компоненте (с поддержкой 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);