如何返回 Svelte 组件的渲染 HTML？

我很难制作一个会消失的工具提示use:action。我的要求是：

1. 创建以 HTML 或组件为内容的工具提示
2. 无需将组件包装在<Tooltip><element></Tooltip>
3. 连接到预制库以实现灵活性

请参阅下面我的示例代码。由于 Tippy.js 依赖性，它在 REPL 中不起作用，但我确实可以在我的应用程序中使用简单的 HTML。这就是为什么我的想法是我应该寻求渲染一个组件，它像其他任何组件一样承认 props，然后以某种方式获取它的 HTML 并将其投入使用：动作调用。 （参见“内容：”嘿，我工作了！'") 它应该像 jQuery 工具提示时代一样简单易用。

REPL 链接：https://svelte.dev/repl/e8fdf98eb42445e3b791d7c908581a71?version=3.17.3 https://svelte.dev/repl/e8fdf98eb42445e3b791d7c908581a71?version=3.17.3

要真正“返回渲染的 HTML”，您需要使用以下命令进行编译generate: 'ssr' option https://svelte.dev/docs#svelte_compile，并使用Cmp.render()功能。但是你不能在 DOM 中使用这样的组件......

您无法真正获取组件的内容，但可以使用如下操作获取任何元素的 HTML：

<script>
const logHtml = el => {
  console.log(el.innerHTML)
}
</script>

<div use:logHtml> ... </div>

或者，简单地说，bind:this关于元素：

<script>
  let el
  $: if (el) console.log(el.innerHTML)
</script>

<div bind:this={el}> ... </div>

但就您而言，您似乎想要的是将组件直接渲染到工具提示的元素中。您可以使用new MyComponent https://svelte.dev/docs#Client-side_component_API为了那个原因。

这是一个渲染自定义组件的示例操作tippy.js (see 更新的 REPL https://svelte.dev/repl/7563f00e70e8448bab94bae4ab1b48c5?version=3.17.3):

export function tipz(elem, { content, props, ...opts }) {
  let cmp

  const tp = tippy(elem, {
    onCreate() {
      cmp = new content({
        target: instance.popper.querySelector(".tippy-content"),
        props,
      });
    },
    ...opts
  })

  return {
    update(params) {
      // ensure reactivity
      if (cmp) {
        cmp.$set(params.props)
      }
    },
    destroy() {
      tp.destroy();
      if (cmp) {
        // cleanup component
        cmp.$destroy();
      }
    }
  };
}