gpt4 book ai didi

javascript - 将带有插槽的 shadow dom 的子项移出 Web 组件

转载 作者:行者123 更新时间:2023-12-05 05:53:27 27 4
gpt4 key购买 nike

我正在尝试将 Web 组件的影子 dom 的 child 移到它外面,如果那个 child 没有插槽,我已经能够做到这一点。

让我举个例子。我有以下 2 个网络组件:

customElements.define('a-child', class extends HTMLElement {
constructor() {
super()
this.attachShadow({mode: 'open'})
this.shadowRoot.innerHTML = `
<slot></slot>
`
}
})

customElements.define('a-parent', class extends HTMLElement {
constructor() {
super()
this.attachShadow({mode: 'open'})
this.shadowRoot.innerHTML = `
<slot name="outside"></slot>
<a-child id=child>
<div>
<slot name="inside"></slot>
</div>
</a-child>
`
}

move() {
const child = this.shadowRoot.getElementById('child')
document.body.append(child)
}
})

如果我有以下 HTML,我就得到了我想要的:即使插槽 inside 位于 的 Shadow DOM 中的 a-child 组件内a-parent,它正确显示。

<a-parent id="parent">
<div slot="outside">outside</div>
<div slot="inside">inside</div>
</a-parent>

如果我从 ID 为 parent 的元素运行 move 方法,a-child 元素将移动到 body 中,我期待在正文中查看带有文本 inside 的 div,但它并没有发生。插槽似乎只有在其网络组件内时才有效。

我的问题是,是否可以将包含插槽的 Shadow DOM 的子项移动到其 Web 组件父项之外?

最佳答案

你是对的。槽仅在它们位于其封闭的 Web 组件内时才起作用。换句话说,插槽应该物理存在于 Web 组件节点下的 DOM 树中。

此外,可以移动 Shadow DOM 的子元素,但如果它们包含插槽,则它不会起作用。它会静静地失败而不会出现任何错误。

这就是它令人讨厌的原因之一。 Read more对于类似的问题。另外,这个 twitter thread包含一些更多的相关信息。总之,您需要将插槽元素移到组件外部,以实现完美的堆叠上下文,以创建对话框、菜单、下拉列表等组件。

关于javascript - 将带有插槽的 shadow dom 的子项移出 Web 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69891279/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com