检测attachShadow事件

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

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

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

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

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

UPDATE：

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

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

我已经MutationObserverhere发出支持attachShadow的建议。

来源

2017-04-04 GullerYA

您可能会超载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>

来源

2017-04-05 07:07:35 Supersharp

它解决了这个问题，但这种做法在我看来更像是从一个黑客的时候我该怎么办呢像许多年前的Prototype/Backbone这样的框架时代。 – GullerYA

这是使用类

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>

来源

2017-04-08 02:43:14

检测attachShadow事件

回答

相关问题