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

Question

我想创建一个Preact组件,让人们使用它,即使他们没有构建Preact应用程序.

示例:我想<MyTooltip>在Preact中构建一个组件,将其捆绑(与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');