Рендеринг контента из div в иерархическую теневую область - PullRequest
Новая
       40

Рендеринг контента из div в иерархическую теневую область

0 голосов
/ 20 марта 2020

У меня есть особые требования, не уверен, что это возможно или нет. Вот контекст.

У меня есть иерархическая тень dom в теге body моего dom. Как-то так. 

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

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

Количество уровней теневого дома - это Dynami c. По сути, каждая тень - это веб-компонент. и у каждого компонента есть свой собственный shadowDom.

Теперь вопрос в том, что у меня есть некоторый контент в теле вне всех теневых доменов.

Я хочу визуализировать этот div в самых внутренних теневых домах. Есть ли способ достичь этого в React или с помощью basi c JS.

Я видел один пример, использующий слоты, но, кажется, он только с одним уровнем теневого домена.

1 Ответ

0 голосов
/ 21 марта 2020

Другими словами:

У вас есть посылка за дверью, и вы хотите, чтобы ее положили на нижнюю полку правой кабины inet на вашей кухне

Это означает

  • либо нижняя полка сама доставляет посылку у входной двери.
  • или какой-то код находит нижнюю полку и кладет туда пакет

(неполный !!) код псевдо: 

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"
    }
  }
))
...