将内容从 div 渲染到分层阴影 dom 内部答案

【问题标题】：Rendering content from div to inside a hierarchical shadow dom将内容从 div 渲染到分层阴影 dom 内部
【发布时间】：2020-07-01 14:34:42
【问题描述】：

我有一个特殊要求，不确定是否可能。这是上下文。

我的 dom 的 body 标记中有分层阴影 dom。像这样的。

<body>
<shadowDom>
    <shadowDom>
        <shadowDom>

        </shadowDom>
    </shadowDom>
</shadowDom>
<div id="outside"><p>Hello world</p></div>
</body>

shadow dom 的层数是动态的。基本上每个影子都是一个 Web 组件。并且每个组件都有自己的 shadowDom。

现在的问题是我在所有 shadow dom 之外的 body 中有一些内容。

我想在最里面的 shadow dom 中渲染这个 div。有没有办法在 React 或基本 JS 中实现这一点。

我见过一个使用槽的例子，但它似乎只使用了一层 shadow dom。

【问题讨论】：

标签： javascript reactjs web-component shadow-dom

【解决方案1】：

换句话说：

你的前门外面有一个包裹，你想把它放在厨房右边柜子的下层架子上

意思是

下层货架本身在前门取走包裹。
或某些代码找到较低的架子并将包裹放在那里

（不完整！！）伪代码：

get body
found-shadowroot = false

do :loop children(body)

:loop children(element)
 if child has shadowroot
   then do :loop children(child)
   else found-shadowroot = child
 if found-shadowroot
   then put content in found-shadowroot

这应该立即提出问题：同级影根都得到内容？

<shadowDom>
    <shadowDom> 
       content here?
    </shadowDom>
    <shadowDom>
       content here?
    </shadowDom>
</shadowDom>

你遇到了编程挑战，

从 2 个级别开始
SLOTs 会使您的代码复杂化，因为您必须通过嵌套插槽传递内容

根据您的用例，您可能想要使用事件。

如果所有 shadowDomlisten 在文档级别
所有 shadowDOM 都知道自己是谁：id=leftShelfRightCabinet

那么你可以这样做：

document.dispatchEvent(new CustomEvent(
  "ContentEvent", {
    detail: {
      content: CONTENT,
      for: "leftShelfRightCabinet"
    }
  }
))

【讨论】：

这看起来像所有东西的处理实际上都存在于shadow dom之外，但我们看到它渲染的实际点是在shadow dom内部吗？或者实际上它会将我的外部 div 移动到 shadow dom 内部。我的要求是较早的。