StencilJS - 在主体而不是组件中插入元素

Question

我正在 StencilJS 中构建一个具有工具提示的组件。

我想在 document.body 中附加此工具提示的标记，而不是在我的组件中，因为当组件包含在带有 Overflow:hidden 的元素中时，它会遇到问题（工具提示被截断）

有什么办法可以实现这一点吗？

我在 React 中有完全相同的组件，我设法通过使用修复它，ReactDOM.createPortal(tooltip, document.body)但我似乎无法在 Stencil 中找到类似的解决方案（另外，文档非常基础）。

我还尝试手动生成元素，document.createElement但这很痛苦而且太冗长，而且我有几个图标作为我想包含的组件。

另一种解决方案是将 JSX 转换为实际标记，然后我可以通过执行document.body.append(tooltip).

Answer 1

createElement可能是最简单、最灵活的方法。

Ionic在创建叠加层（警报、模式、弹出窗口等）时执行此操作。

const tooltip = document.createElement('my-tooltip');
tooltip.content = 'Tooltip Content <my-icon name="foo"/>';
document.body.append(tooltip);

通过这种方式，您可以轻松地将属性传递给tooltip，包括工具提示应放置的位置（例如 Ionic 的popover组件）。

<div innerHTML={this.content}>您还可以传递要包含的组件的名称，然后工具提示将使用来创建该组件，而不是将 HTML 作为属性传递（并通过 来使用它） createElement。