Javascript 检测attachShadow事件

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

用例：使用

MutationObserver

监视任何DOM更改，并将更改的内容作为绑定（绑定）框架逻辑的一部分进行后处理

为什么我需要检测此事件？为了能够监视shadowDOM中的更改，应该在shadowRoot上创建并设置另一个

MutationObserver

——这很好，所以唯一的问题是检测新创建的阴影

不用说，显然

MutationObserver

没有检测到

attachShadow

操作，在所有选项标志都设置为true的情况下尝试了该操作

注意：我知道，但这不是完全相同的问题，伊姆霍

更新：

我将@Supersharp的答案标记为该问题的答案，因为看起来像是代理本机的

attachShadow

方法是目前观察该动作的唯一方法

然而，与我们不是在代理

appendChild

、

removeChild

、

innerHTML

/

textContent

等类似的事实，在这种情况下，我们也依赖于定义良好的

MutationObserver

API，必须有一种方法可以实现同样的效果，而不会潜在地破坏本机API行为，也不会追赶和尝试任何其他可能的未来附加阴影的方法（可能也会有删除，已经有覆盖）等等

---

我已经发布了一个建议，通过

MutationObserver

支持

attachShadow

，您可以覆盖

HTMLElement

原型中定义的本机

attachShadow（）

方法

然后，在新函数中，向影子根添加一个MutationObserver

var attachShadow=HTMLElement.prototype.attachShadow
HTMLElement.prototype.attachShadow=函数（选项）
{
var sh=attachShadow.call（此选项）
console.info（“%s”阴影附加到%s'，option.mode，此）
//在此处添加一个MitationObserver
返回sh
}
target.attachShadow（{mode:'open'}）
.innerHTML='Hello'

---

这是我在使用类时的做法

const Mixin=base=>类扩展了base{
构造函数（）{
超级（）；
}
附件阴影（选项）{
super.attachShadow（选项）；
log（'shadowRoot已创建'）；
}
}
类SomeElement扩展Mixin（HtmleElement）{
构造函数（）{
超级（）；
}
connectedCallback（）{
this.attachShadow（{mode:'open'}）；
this.shadowRoot.innerHTML=''；
}
}
自定义元素。定义（'some-element'，SomeElement）

---

shadow

const target=document.querySelector（'html-element'）//shadowroot附加到的元素 const config={attributes:true，childList:true，subtree:true}
const callback=函数（mutationList，observer）{
//做点什么 };
const observer=新的MutationObserver（回调）

---

observer.observe（目标，配置）

它解决了问题，但在我看来，这种方法更像是多年前原型/主干框架时代的黑客。请解释你的答案。我认为这个答案忽略了问题，提供了一种检测更改的方法，即使在

shadowRoot

中，但在元素的光DOM中，这是显而易见的。OP不是关于这一点，而是关于调用

attachShadow

方法这一事实的检测。