检测 attachShadow 事件

Question

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

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

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

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

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

更新：

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

然而，类似于我们没有代理appendChild、removeChild、innerHTML/textContent 等，而是在定义明确的MutationObserver API 上进行中继，在这种情况下，也必须有一种在不破坏本机 API 行为或追赶和管道任何其他可能的未来附加影子方式的情况下实现相同的方法（并且可能也会删除？，已经有一个覆盖）等。

我已通过MutationObserver here 提出支持attachShadow 的提案。

Answer 1

您可以覆盖 HTMLElement 原型中定义的原生 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>

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>

Answer 3

const target = document.querySelector('html-element'); //shadowroot附加到的元素 const config = { 属性：true，childList：true，子树：true };
常量回调 = 函数（突变列表，观察者）{
//做点什么 };
常量观察者 = 新的 MutationObserver（回调）；
观察者.观察（目标，配置）；