Web 组件 Light DOM 槽相当于将动态内容注入特定元素

Question

我正在努力做一些看起来应该很简单的事情。我正在创建我的第一个 Web 组件，它不能位于 ShadowDOM 内。我需要它来接收一些动态内容并将其注入到正确的 div 中，如下所示：

<component>
  <div id="one"><!-- Dynamic Content ends up here --></div>
  <div id="two">...</div>
</component>

在 ShadowDOM 中使用槽很简单，为什么在 lightDOM 中却很困难？ 如有任何帮助，我们将不胜感激。

Answer 1

你的问题本质上是关于在没有 Shadow DOM 的情况下使用

slots

。不幸的是，这个问题没有现成的解决方案。您可以使用

<template>

标签和组件道具的组合：

<component>
  <template>
      <div id="one"><!-- Dynamic Content ends up here --></div>
      <div id="two">...</div>
  </template>
</component>

然后，对于

<component />

的每个实例，您将使用

cloneNode

方法克隆模板。然后，您将此节点附加为自定义组件的子节点。您可以随心所欲地扩充 DOM。

现在，等式的第二部分是将动态内容添加到

div#one

和

div#two

。为此，您应该在组件上声明两个

props

，调用者将传递内容。然后，Web 组件将通过

DocumentFragment

、

innerHTML

或其他 DOM API 附加该内容。这与基于 vDOM 的框架（如

React

、

Vue

）的做法大致相似。唯一的区别是它不是传递真实的 DOM，而是将虚拟树作为

children

或

render

prop 传递。

因此，如果没有适当的框架，这将是一项艰巨的工作。我建议您考虑使用 Shadow DOM 并保留 Shadow Root

open

。