Question

我正在使用Polymer的ShadowDOM和MutationObserver polyfills并需要：

检测何时插入HTMLCanvasElement以便我可以执行布局（当从DOM树中分离时，其宽度和高度未通过offsetWidth / offsetHeight确定）
检测元素何时被删除，以便我可以暂停其requestAnimationFrame循环

传统上，如果没有Shadow DOM，其工作原理如下：

将MutationObserver附加到document.body并为任何画布元素执行querySelectorAll
执行某些方法，例如关于这些元素的layoutNode
如果在动画循环document.body.contains(node)中返回false，则该节点已从DOM中删除

当使用Shadow DOM时，我可以通过执行（看起来非常低效）扫描DOM中所有已添加根的元素并在任何阴影上执行layoutNode来绕过阴影dom边界dom节点继承自HTMLCanvasElement。

如何从画布的动画循环中检查此节点是否仍在DOM树中？

是否有更好的API可用于检测何时插入DOM节点？

（注意：使用Polymer的CustomElements polyfill，MutationEvents不可用。）

Answer 1

我可以使用附加到Node的以下函数来检查节点是否最终在给定文档中是根（通过多个阴影dom边界），如果没有指定文档，则检查当前文档。这应该与基于JS的root.contains(node)调用一样有效。

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

Answer 2

也许您也可以使用以下之一：

ResizeObserver

ResizeObserver界面报告更改的尺寸元素的内容或边框，或SVGElement的边界框。

当影子DOM的内容更改时，MutationObserver不会得到通知，因为它看不到其自己的DOM中的任何更改。但是Shadow DOM中的更改可能会影响包含元素的Shadow DOM的大小。使用ResizeObserver可以观察到这种大小变化。

这也许也值得一看：

Intersection Observer API

Intersection Observer API提供了一种异步观察的方法目标元素与祖先相交的变化元素或具有顶级文档的视口。

MutationObserver和Shadow DOM

2 个答案: