javascript - MutationObserver and Shadow DOM - Stack Overflow

admin管理员组

文章数量:1389768

I'm using Polymer's ShadowDOM and MutationObserver polyfills and need to:

• Detect when a HTMLCanvasElement is inserted so that I can perform layout (its width and height are undetermined through offsetWidth / offsetHeight when detached from the DOM tree)
• Detect when the element is removed so I can halt its requestAnimationFrame loop

Traditionally, without Shadow DOM, this works as follows:

1. Attach MutationObserver to document.body and perform querySelectorAll for any canvas elements
2. Perform some method, e.g. layoutNode on these elements
3. If in the animation loop document.body.contains(node) returns false, then the node has been removed from the DOM

When using Shadow DOM I can get around the shadow dom boundaries by performing (what seems to be very inefficient) scans across all elements in the DOM that have roots which have been added, and performing layoutNode on any shadow dom nodes inheriting from HTMLCanvasElement.

How do I check from the animation loop of the canvas that this node is still in the DOM tree?

Is there a better API to use for detecting when a DOM node has been inserted?

(NB. MutationEvents are unavailable using Polymer's CustomElements polyfill.)

I'm using Polymer's ShadowDOM and MutationObserver polyfills and need to:

• Detect when a HTMLCanvasElement is inserted so that I can perform layout (its width and height are undetermined through offsetWidth / offsetHeight when detached from the DOM tree)
• Detect when the element is removed so I can halt its requestAnimationFrame loop

Traditionally, without Shadow DOM, this works as follows:

1. Attach MutationObserver to document.body and perform querySelectorAll for any canvas elements
2. Perform some method, e.g. layoutNode on these elements
3. If in the animation loop document.body.contains(node) returns false, then the node has been removed from the DOM

When using Shadow DOM I can get around the shadow dom boundaries by performing (what seems to be very inefficient) scans across all elements in the DOM that have roots which have been added, and performing layoutNode on any shadow dom nodes inheriting from HTMLCanvasElement.

How do I check from the animation loop of the canvas that this node is still in the DOM tree?

Is there a better API to use for detecting when a DOM node has been inserted?

(NB. MutationEvents are unavailable using Polymer's CustomElements polyfill.)

• javascript
• html
• dom
• shadow-dom
• mutation-observers

Share Improve this question Follow edited Jun 19, 2016 at 6:28 user663031 asked Jun 30, 2014 at 9:28 TimTim 56055 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Maybe you could also use one of these:

ResizeObserver

The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.

When the contents of a Shadow DOM changes, the MutationObserver is not notified, because it doesn't see any change in it's own DOM. But the change in the Shadow DOM might have an effect on the size of the Shadow DOM containing element. This size change can be observed with the ResizeObserver.

This one could also be worth looking at:

Intersection Observer API

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

I can use the following function attached to a Node to check whether the node is eventually rooted (through multiple shadow dom boundaries) at a given document, or the current document if no document is specified. This should be as efficient as a JS-based root.contains(node) call.

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;
    }
});

本文标签： javascriptMutationObserver and Shadow DOMStack Overflow