我想创建一个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吗？
有一个伟大的库为你做这个叫做preact-custom-element：
https://github.com/bspaulding/preact-custom-element
class SearchBox extends Component {
render() {
// ...
}
}
registerComponent(SearchBox, 'search-box');
虽然@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>
我的虚拟web组件：
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。npx webpack。index.html将在/webcomponent（例如http://localhost:3000/webcomponent/）下提供。<div>Hello, Test!</div>
附录：
preact，我找到了一种使用preact-habitat的替代方法，它做了类似的事情：https://github.com/zouhir/preact-habitat