Question

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

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

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

毋庸置疑，明显地MutationObserver没有检测到attachShadow操作，尝试将所有选项标志设置为true。

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

更新：

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

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

我已根据attachShadow here发布了支持MutationObserver的提案。

Answer 1

您可以覆盖attachShadow()原型中定义的原生HTMLElement方法。

然后，在新函数内部，将一个MutationObserver添加到阴影根。

＆＃13;

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'

＆＃13;

<div id=target></div>

＆＃13;

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 };
const callback = function(mutationList,observer){
//做点什么 };
const 观察者 = 新 MutationObserver(回调);
观察者。观察（目标，配置）；

检测attachShadow事件

3 个答案: