TypeScript无法识别Lit-element依赖问题咨询

为什么会出现这种情况？ #

1. 模板中插入<script type="module">无效
   Lit 渲染的模板属于动态DOM内容，浏览器不会自动执行自定义元素模板内插入的模块脚本。你写在html模板里的<script>标签只会被当作普通DOM节点插入，不会触发模块加载，所以CustomElement根本没被注册，<custom-element>自然无法渲染。

2. 未引用的导入会被树摇移除
   TypeScript 配合打包工具（如Vite、Rollup）默认会开启**树摇（Tree Shaking）**优化：如果导入的模块成员没有在代码中被直接引用，打包工具会认为这是无用代码，将其从最终产物中移除。所以单纯写import { CustomElement } from "./path/to/customelement.ts";但不引用时，CustomElement的注册代码根本没被打包进去，元素自然无法注册。而添加CustomElement;这种无意义的引用后，打包工具会认为这个成员被用到了，保留对应的模块代码，元素注册成功后就能正常渲染。

正确的解决方法（无需添加无用语句） #

不需要修改tsconfig.json，改用副作用导入即可：

// 不需要导入具体成员，只加载模块执行其顶层代码（比如CustomElement的注册逻辑）
import "./path/to/customelement.ts";

这种导入方式明确告诉打包工具：这个模块有副作用（比如注册自定义元素），即使没有被代码引用，也不能被树摇移除。模块加载后，CustomElement的注册逻辑会自动执行，此时<custom-element>就能正常渲染。

如果需要同时导入CustomElement的类型用于类型注解，可以结合类型导入和副作用导入：

import type { CustomElement } from "./path/to/customelement.ts";
import "./path/to/customelement.ts";

内容的提问来源于stack exchange，提问作者ColonelHedgehog