StencilJS - 在正文中插入元素而不是组件

Question

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

我想 append 这个工具提示的标记在 document.body 而不是我的组件中，因为当组件包装在具有溢出的元素中时会遇到问题：隐藏（工具提示被切断）

有什么办法可以做到这一点？

我在 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组件中）。

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