我可以通过自定义元素使用 Preact 组件吗？
Posted
技术标签:
【中文标题】我可以通过自定义元素使用 Preact 组件吗？【英文标题】：Can I use a Preact component via Custom Elements? 【发布时间】：2017-07-08 18:23:38 【问题描述】：我想创建一个 Preact 组件并让人们使用它，即使他们没有构建 Preact 应用程序。
示例：我想在 Preact 中构建一个 <MyTooltip> 组件，将其捆绑（与 Preact 运行时一起），并让人们将其作为脚本标签加载，纯粹以声明方式使用它，也许像这样：
<script src="https://unpkg.com/my-tooltip/my-tooltip-bundled.js">
<my-tooltip content="Tooltip content">Hover here</my-tooltip>
有没有办法捆绑一个组件，使其包含 Preact 运行时、我的库代码和 <my-tooltip> 元素的挂钩？
换句话说，我是否可以将我的 Preact 组件作为自定义元素进行交互，类似于 ReactiveElements？
【问题讨论】：
【参考方案1】：有一个很棒的库可以为您执行此操作，称为 preact-custom-element：
https://github.com/bspaulding/preact-custom-element
class SearchBox extends Component
render()
// ...
registerComponent(SearchBox, 'search-box');
【讨论】：
【参考方案2】：尽管@Jason Miller 的回答对我帮助很大，但我仍然难以制作一个基本的工作示例，所以这是我从头到尾解决这个问题的方法：
我的基本 html 文档包括捆绑脚本 dummy.js，其中包含我的虚拟 Web 组件的实际代码：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<script async src="./dummy.js" type="text/javascript"></script>
<dummy-view name="Test"></dummy-view>
</div>
</body>
</html>
我的虚拟网络组件：
import div from '../utils/hyperscript';
import registerCustomElement from 'preact-custom-element';
const DummyView = ( name = "World" ) => (
div(, `Hello, $name!`)
);
registerCustomElement(DummyView, "dummy-view", ["name"]);
我的 webpack 配置：
const path = require('path');
module.exports =
entry:
dummy: './lib/dummy/dummy-view.js'
,
module:
rules: [
test: /\.css$/,
use: ['style-loader', 'css-loader']
]
,
output:
path: path.resolve(__dirname, 'webcomponent/')
;
更多细节：
我安装了preact-custom-element，就像npm i preact-custom-element一样。
使用 webpack 完成捆绑，如下所示：npx webpack。
index.html 将在/webcomponent 下提供（例如http://localhost:3000/webcomponent/）。
在浏览器中访问上述网址时，结果如下：
<div>Hello, Test!</div>
附录：
因为我使用的是preact，所以我找到了一种使用preact-habitat 的替代方法，它的作用非常相似：https://github.com/zouhir/preact-habitat
【讨论】：
这是一个很好的例子！【参考方案3】：PreactJS 自己有一个库可以做到这一点
https://github.com/preactjs/preact-custom-element
【讨论】：
【参考方案4】：如果您不想使用其他库来保持苗条，您可以这样做：
import h from "preact";
h("lottie-player",
src: "/lf30_editor_mjfhn8gt.json",
background: "transparent",
speed: 1,
style:
width: 300,
height: 300,
,
loop: true,
autoplay: true,
)
【讨论】：
【参考方案5】：除了已经提到的其他包，还有：
https://github.com/jhukdev/preactement
它以类似的方式工作，但允许您在需要时动态导入组件文件，从而减少您的前期 javascript：
import define from 'preactement';
define('my-tooltip', () => import('./myTooltip'));
披露：我是作者 :)
【讨论】：
以上是关于我可以通过自定义元素使用 Preact 组件吗？的主要内容，如果未能解决你的问题，请参考以下文章