檢測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事件

回答

相關問題