javascript - 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 创建该组件。 .