AsyncPreactLoader 是一个自定义 Web 组件，允许动态加载和渲染 Preact 组件。它支持异步加载外部组件，并通过 Shadow DOM 隔离样式和行为。
- 动态加载: 通过
src属性指定外部 Preact 组件的 URL。 - 异步渲染: 组件在加载完成后自动渲染。
- Shadow DOM: 使用 Shadow DOM 隔离组件样式，避免与其他样式冲突。
你可以通过 npm 或直接在 HTML 文件中引入组件。
npm install在你的 HTML 文件中，添加以下代码：
<script type="module" src="path/to/AsyncPreactLoader.js"></script>首先，你需要定义一个 Preact 组件，并将其暴露为全局函数 PREACT_COMPONENT。以下是一个简单的示例：
// my-component.js
window.__PREACT_COMPONENT__ = (h, Component) => {
class Main extends Component {
render() {
return h('div', {}, ["Hello World"]);
}
}
return Main;
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PreactLoader Example</title>
<script type="module" src="path/to/AsyncPreactLoader.js"></script>
</head>
<body>
<async-preact-loader src="https://example.com/my-component.js" name="World"></async-preact-loader>
<script>
// 你可以在这里添加其他 JavaScript 代码
</script>
</body>
</html>- src: 指定要加载的 Preact 组件的 URL。
- name: 传递给组件的属性（在上面的示例中，name 属性被传递给 MyComponent）。
欢迎任何形式的贡献！请提交问题、建议或拉取请求。