检测 attachShadow 事件

Question

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

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

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

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

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

更新：

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

然而，类似于我们没有代理 appendChild、removeChild、innerHTML/textContent 等，而是依赖定义明确的 MutationObserver APIs，在这种情况下，必须有一种方法可以实现相同的目标，而不会潜在地破坏本机 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

常量目标=document.querySelector('html-element'); // shadowroot 附加到的元素 const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationList, observer){
//做一点事 };
const observer = new MutationObserver(回调);
observer.observe（目标，配置）；

检测 attachShadow 事件

Detect attachShadow event

javascript

events

dom

mutation-observers

shadow-dom