gpt4 book ai didi

javascript - 检测 attachShadow 事件

转载 作者:行者123 更新时间:2023-11-29 19:05:29 25 4
gpt4 key购买 nike

我想检测将阴影附加到宿主元素的事件。

用例:使用 MutationObserver 来观察任何 DOM 变化并作为绑定(bind)(绑定(bind))框架逻辑的一部分对变化的内容进行后处理。

为什么我需要检测这个事件?为了能够观察 shadowDOM 中的变化,应该创建另一个 MutationObserver 并将其设置在 shadowRoot 上 - 这工作得很好,所以唯一的问题是检测新创建的阴影。

不用说,显然 MutationObserver 没有检测到 attachShadow 操作,尝试将所有选项标志设置为 true。

注意:我知道 this question on this forum ,但这不是完全相同的问题,恕我直言。

更新:

我将@Supersharp 的答案标记为问题的答案,因为看起来代理 原生attachShadow 方法是目前唯一的方法 观察这个 Action 。

但是,类似于我们没有代理 appendChildremoveChildinnerHTML/textContent 和其他,但依赖于定义良好的 MutationObserver API,在这种情况下,也必须有一种方法可以实现相同的目标,而不会潜在地破坏 native API 行为或 catch 和探索任何其他可能的 future 附加影子的方法(可能也会被删除?,已经有覆盖)等。

我已经通过 MutationObserver 发布了支持 attachShadow 的提案 here .

最佳答案

您可以覆盖 HTMLElement 原型(prototype)中定义的原生 attachShadow() 方法。

然后,在新函数中,将 MutationObserver 添加到影子根。

var attachShadow = HTMLElement.prototype.attachShadow

HTMLElement.prototype.attachShadow = function ( option )
{
var sh = attachShadow.call( this, option )
console.info( '%s shadow attached to %s', option.mode, this )
//add a MutationObserver here
return sh
}

target.attachShadow( { mode: 'open' } )
.innerHTML = 'Hello'
<div id=target></div>

关于javascript - 检测 attachShadow 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43217178/

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