MutationObserver 和 Shadow DOM答案

【问题标题】：MutationObserver and Shadow DOMMutationObserver 和 Shadow DOM
【发布时间】：2014-06-30 09:28:36
【问题描述】：

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

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

传统上，没有 Shadow DOM，它的工作方式如下：

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

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

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

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

（注意，使用 Polymer 的 CustomElements polyfill 无法使用 MutationEvents。）

【问题讨论】：

标签： javascript html dom shadow-dom mutation-observers

【解决方案1】：

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

【讨论】：

【解决方案2】：

也许您也可以使用其中一种：

ResizeObserver

ResizeObserver 接口报告对元素的内容或边框，或 SVGElement 的边界框。

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

这个也值得一看：

Intersection Observer API

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

【讨论】：