javascript - 检测 attachShadow 事件

Question

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

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

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

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

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

更新:

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

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

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

Answer 1

您可以覆盖 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>