javascript - 合成 LWC 影子 DOM 插槽与原生影子 DOM 插槽

Question

LWC 合成影子 dom 似乎不像原生影子 dom 实现那样处理插槽，例如

假设您从一个元素开始：

<hello-there><h1>Hi there</h1></hello-there>

然后你附加shadow dom并添加一个槽，h1将被开槽：

现在如果你在运行 "@lwc/synthetic-shadow": "^1.1.1" 时做同样的事情

你得到：

有趣的是，它看起来也将 light dom 移动到了合成阴影根中。我应该调用一个函数来让插槽正常运行吗？或某种排序？

score 1 · Accepted Answer

不幸的是，“合成 Shadow DOM”是一种 polyfill，它不能完全模仿真实（本机）Shadow DOM 的行为（如 css 封装......或开槽）。

这就是<slot>元素出现在 light DOM 中的原因：

实际上没有 Shadow DOM（#shadow-root在控制台中没有）
然后，该shadowRoot属性是一个假属性，它重定向到附加到轻 DOM的文档片段（参见#document-fragment而不是在控制台中）。#shadow-root

1 回答 1