检测attachShadow事件

Question

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

用例：用于MutationObserver观察任何 DOM 更改并对更改的内容进行后处理，作为绑定（捆绑）框架逻辑的一部分。

为什么我需要检测此事件？为了能够监视 ShadowDOM 中的变化，MutationObserver应该创建另一个并在 ShadowRoot 上设置 - 这工作得很好，所以唯一的问题是检测新创建的阴影。

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

注意：我在这个论坛上知道这个问题，但恕我直言，这不是完全相同的问题。

更新：

我将 @Supersharp 的答案标记为问题的答案，因为看起来代理本机attachShadow方法是目前观察此操作的唯一方法。

然而，与我们不是代理appendChild、removeChild、innerHTML/textContent等，而是依赖定义良好的MutationObserverAPI 的事实类似，在这种情况下，也必须有一种方法来实现相同的目标，而不会潜在地破坏本机 API 行为或追赶和管道任何其他可能的未来方式来附加阴影（并且可能也会删除？，已经有覆盖）等。

attachShadow我已经在MutationObserver 这里发布了支持提案。

Answer 1

attachShadow()您可以重写原型中定义的本机方法HTMLElement。

然后，在新函数内，将 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>