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

Question

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

我的 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 中有一些内容。

我想在最里面的阴影 dom 中渲染这个 div。 有什么方法可以在 React 或基本 JS 中实现这一点。

我见过一个使用插槽的例子，但似乎它只有一层阴影 dom。

Answer 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将使您的代码复杂化，因为您必须通过嵌套插槽传递内容

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

如果所有 shadowDoms 都在文档级别侦听
所有 shadowDOM 都知道他们是谁： id=leftShelfRightCabinet

然后你可以这样做：

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

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

问题描述

1 个解决方案

解决方案1
0 2020-03-21 08:23:41

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

问题描述

1 个解决方案

解决方案1 0 2020-03-21 08:23:41

解决方案1
0 2020-03-21 08:23:41