在 Typescript 中为 Web 组件导入 CSS 和 HTML 内容

Question

我有一个 Web 组件，我可以在我的 main.ts 中使用它，这是我的应用程序的入口点。

main.ts：

import './Components/List/ListComponent'

console.log("Main");  

ListComponent.ts

export class ListComponent extends HTMLElement {
...
customElements.define("my-list", ListComponent );

我能够将我的代码拆分为 TS 模块。我尝试实现的下一步是为 Web 组件加载 HTML 和 CSS 内容。类似于 Angular 的做法，但使用的是 Vanilla Web Components。我的目标是在 HTML 文件中定义 Web 组件的 HTML 内容，并在 CSS 文件中定义组件的 CSS 样式。

我遵循的教程使用 webpack，我只想用它来解析我的导入（我希望我的 TS 代码与任何捆绑器兼容）

我已经看到我可以通过 import "./css/main.css"; 导入 CSS 文件，但它似乎只适用于 Webpack 的 MiniCssExtractPlugin。同样，对于 Web 组件，样式是全局的，而不是本地的。 我可以用类似的方式导入 HTML 文件吗？

是否有一种“普通”的 TS 方式来导入 CSS 和 HTML 文件？ 如果可能的话，我想独立于任何框架和模块加载器。 我知道我的结构类似于 Angular，但我只需要基本功能

Answer 1

您需要了解 JSX。在 react 应用程序模板部分使用 JSX 处理。它非常简单，易于学习和使用。 此外，仅当您已将其导出为默认值时，您才能导入例如 ListComponent，否则明智地使用 {}。

import ListComponent from './Components/List/ListComponent'

Answer 2

有几种方法可以做到这一点。有 babel 插件可以将任意文件内联为字符串，也可以创建一个文件html.d.ts，内容如下：

declare module '*.html' {
  const value: string;
  export default value
}

然后您可以从您的MyList.ts 执行类似import html from '. /template.html' 的操作