7

Polymer の ShadowDOM とMutationObserverpolyfill を使用しており、次のことを行う必要があります。

  • レイアウトを実行できるように a が挿入されたことを検出しHTMLCanvasElementます (その幅と高さは、DOM ツリーから切り離された場合は不定offsetWidthですoffsetHeight)
  • requestAnimationFrame要素が削除されたことを検出して、ループを停止できるようにする

従来、Shadow DOM を使用しない場合、これは次のように機能します。

  1. キャンバス要素に取り付けMutationObserverてdocument.body実行するquerySelectorAll
  2. layoutNodeたとえば、これらの要素に対して何らかのメソッドを実行します
  3. アニメーション ループでdocument.body.contains(node)が返された場合false、ノードは DOM から削除されています。

Shadow DOM を使用する場合、ルートが追加された DOM 内のすべての要素に対してスキャンを実行し (非常に非効率的と思われる)、Shadow DOM の境界を回避することができlayoutNodeますHTMLCanvasElement。

このノードがまだ DOM ツリーにあることをキャンバスのアニメーション ループから確認するにはどうすればよいですか?

DOM ノードが挿入されたことを検出するために使用するより良い API はありますか?

(注: MutationEvents は、Polymer の CustomElements ポリフィルを使用すると利用できません。)

4

2 に答える 2

2

Node にアタッチされた次の関数を使用して、ノードが最終的に (複数の Shadow DOM 境界を介して) 特定のドキュメントでルート化されるかどうか、またはドキュメントが指定されていない場合は現在のドキュメントでルート化されるかどうかを確認できます。root.contains(node)これは、JS ベースの呼び出しと同じくらい効率的です。

Object.defineProperty(Node.prototype, 'isAttachedToDocument', {
    configurable: true,
    enumerable: false,
    writable: true,
    value: function(document) {
        document = document || window.document;
        var el = this;
        while(el.parentNode || el.host) el = el.parentNode || el.host;
        return (el.impl || el) === document;
    }
});
于 2014-06-30T10:49:58.417 に答える