关于这个话题似乎有很多过时的问题，我找不到最近的一个（2018）。另外，其他问题只是着眼于使之起作用，我着眼于使该工作遵循ES6模块关于HTML导入的道路的正确路径。
所有浏览器似乎都同意html导入已死
<link rel="import" href="https://xyz.html">
如果是这样，是否有导入html的好方法
<template>
在JavaScript中使用？
我在这里找到了这个技巧- 创建和使用自定义HTML组件？，但它依赖于JavaScript文件中的HTML作为字符串。
在我的理想世界中，我可以定义一个HTML文件template.html（这样我就可以得到不错的编辑器颜色编码），但是能够导入该文件以在我的dom中使用。
我知道有像lit-html这样的库可以使此操作变得容易，但是似乎由于ES6模块现在是标准的，并且由于不推荐使用html导入来代替ES6模块，因此应该有一些简单的本地方法来做到这一点吗？
由于Html-Imports现已在Chrome(https://www.chromestatus.com/feature/5144752345317376)中弃用,并且将被删除,我想知道其他选择是什么.
我目前正在使用Html-Imports导入Html模板.到目前为止,我只看到两种选择:
是否有一种新的香草方式来导入Html模板？(通过"vanilla"我基本上意味着没有任何其他工具,如预编译器或捆绑器参与)
我一直在阅读，但我没有找到任何东西，如果有可能在不同的 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）？ …
我们正在使用 Lit Element 并且我们的组件文件变得相当大，因为我们必须在 .js 文件中编写样式和 html。有没有办法将它们拆分成单独的文件，然后将它们导入到我们的组件中？这样做的最佳方法是什么？HTML 和 CSS 尤其让我们的工作流程变得困难，因为我们的文件变得过于臃肿。
更新：Supersharp 的建议帮助我分离了 CSS 和 html 模板，但我在将 html 模板与指定属性绑定时遇到了问题。我有一个服务文件，它为我指定的文件发出 XML 请求，我将它导入到我的组件文件中。这是我的组件：
import { LitElement, html} from '@polymer/lit-element';
import HtmlLoader from './Service/HtmlLoader';
class TestAnimatedButtonElement extends LitElement {
static get properties() {
return {
_text: {
type: String
}
}
}
constructor() {
super();
this.htmlTemplate = HtmlLoader.prototype.getHtmlTemplate('/src/Components/ExampleElements/test-animated-button-element.html');
}
render(){
this.htmlTemplate.then( template => this.shadowRoot.innerHTML = template)
return html( [this.htmlTemplate] );
}
handleButton(e) {
//e.preventDefault();
console.log('Button pressed');
}
}
customElements.define('test-animated-button-element', TestAnimatedButtonElement);
这是我的 html 文件： …
html-imports ×2
lit-html ×2
es6-modules ×1
html ×1
import ×1
javascript ×1
module ×1
polymer ×1