attachShadowイベントの検出

Question

私は、ホスト要素にシャドウを付加するイベントを検出したいと考えています。

ユースケース：MutationObserverを使用して、変更されたコンテンツをバインディング（結合）フレームワークのロジックの一部として変更して後処理することができます。

なぜこのイベントを検出する必要がありますか？ shadowDOM内の変更を監視できるようにするには、別のMutationObserverを作成してshadowRootに設定する必要があります。これはうまくいきます。唯一の問題は新しく作成された影を検出することです。

もちろん、MutationObserverは、attachShadowアクションを検出しませんでした。すべてのオプションフラグをtrueに設定してみました。

注：私はthis question on this forumを認識していますが、まったく同じ問題ではありません。

UPDATE：

私はのように見えますが、ネイティブattachShadow方法が現在この行動を観察するための唯一の方法であるをproxifyingいるので、質問への答えとして@Supersharpの答えをマークしています。

しかし、同様に我々はappendChild、removeChild、innerHTML/textContentなどをproxifyingますが、この場合にも、明確に定義されたMutationObserver APIの上の中継されていないという事実のために、潜在的に壊すことなく、同じことを達成するための方法が必要ネイティブAPIの動作やなど私はMutationObserverhereでattachShadowをサポートするための提案を発行しました

（？、すでにオーバーライドがあり、おそらくあまりにも除去があるでしょう）追いつくと影を付けるために、他の可能な将来の道をplumbering 。

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>