MutationObserver and Shadow DOM

Question

我正在使用Polymer的ShadowDOM和MutationObserver polyfills，并需要做到以下几点：

- 检测HTMLCanvasElement元素何时被插入，以便我可以执行布局（当从DOM树中删除时，它的宽度和高度通过offsetWidth / offsetHeight是不确定的） - 检测元素何时被删除，以便我可以停止它的requestAnimationFrame循环

传统上，在没有Shadow DOM的情况下，这样操作：

1. 将MutationObserver附加到document.body并对任何canvas元素执行querySelectorAll 2. 在这些元素上执行某些方法，例如layoutNode 3. 如果在动画循环中document.body.contains（node）返回false，则该节点已从DOM中删除

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

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

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

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

- Tim

Answer 1

也许你还可以使用其中之一： ResizeObserver ResizeObserver 接口报告了 Element 的内容或边框框的尺寸变化，或 SVGElement 的边界框的变化。

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

这个也值得一看： Intersection Observer API Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档视口交叉的变化的方法。

- gitaarik

Answer 2

我可以使用以下函数附加到一个节点，以检查该节点是否最终根源于给定文档（通过多个影子 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;
    }
});

- Tim