我可以通过自定义元素使用 Preact 组件吗？

Question

我想创建一个 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？

Answer 1

有一个名为 preact-custom-element 的很棒的库可以为您执行此操作：

https://github.com/bspaulding/preact-custom-element

class SearchBox extends Component {
  render() {
    // ...
  }
}
registerComponent(SearchBox, 'search-box');

Answer 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/）。
在浏览器中访问上面的URL，结果会是这样的：

<div>Hello, Test!</div>

附录：

由于我使用的是 preact，因此我找到了一种使用 preact-habitat 的替代方法，它的作用非常相似：https://github.com/zouhir/preact-habitat

Answer 3

PreactJS 本身有一个库可以做到这一点

https://github.com/preactjs/preact-custom-element

Answer 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,
})

Answer 5

我写了一篇文章来实现这一点：

https://www.jameshill.dev/articles/custom-elements-with-preact/

除了已经提到的其他软件包，还有：

https://github.com/jahilldev/preactement

它以类似的方式工作，但允许您在需要时动态导入您的组件文件，减少您的前期费用 javascript:

import { define } from 'preactement';

define('my-tooltip', () => import('./myTooltip'));

披露：我是作者 :)

我可以通过自定义元素使用 Preact 组件吗？

Can I use a Preact component via Custom Elements?

custom-element

preact