7

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

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

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

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

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

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

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

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

4

2 回答 2

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;
    }
});
于 2014-06-30T10:49:58.417 回答
2

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

调整大小观察者

ResizeObserver 接口报告元素内容或边框框或 SVGElement 边界框的尺寸变化。

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

这个也值得一看：

交叉口观察者 API

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

于 2020-12-03T19:22:00.580 回答