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 does this 创建叠加层（提醒、模态、弹出窗口等）时。

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

通过这种方式，您可以轻松地将属性传递给 tooltip，包括工具提示应放置的位置 (example in Ionic's popover component)。

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

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