检测attachShadow事件

Question

我想检测附加阴影host元素的一个事件。

用例：使用MutationObserver观看任何DOM变化和后处理变更内容为结合（搭售）部分框架的逻辑。

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

不用说，这显然MutationObserver不检测attachShadow行动，试图与所有设置为true选项的标志组成。

注：我知道this question on this forum的，但它是不完全一样的问题，恕我直言。

更新：

我标志着@Supersharp的答案的问题的答案，因为长得像proxifying本地attachShadow方法是目前观察到这种行为的唯一途径。

然而，同样的事实，我们不proxifying appendChild，removeChild，innerHTML / textContent等人，但中继上明确界定MutationObserver的API，在此情况下，必须有一种方法来达到同样没有可能破坏原生API的行为或赶上并plumbering任何其他可能的未来之路附加的阴影（可能会有去除过多？已经有一个覆盖）等。

我出具attachShadow MutationObserver支持here的建议。

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>

Answer 2

这是使用类时，我该怎么办呢

const Mixin = base => class extends base {
  constructor() {
    super();
  }
  
  attachShadow(options) {
    super.attachShadow(options);
    console.log('shadowRoot created');
  }
}

class SomeElement extends Mixin(HTMLElement) {
  constructor() {
    super();
  }
  
  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = '<slot></slot>';
  }
}
customElements.define('some-element', SomeElement)

<some-element><h1>shadow</h1></some-element>