Support shadow DOM and same-origin iframes

package.json

@@ -1,7 +1,7 @@
 {
     "name": "resize-observer-polyfill",
     "author": "Denis Rul <[email protected]>",
-    "version": "1.5.1",
+    "version": "1.5.2",
     "description": "A polyfill for the Resize Observer API",
     "main": "dist/ResizeObserver.js",
     "module": "dist/ResizeObserver.es.js",

src/GlobalResizeObserverController.js

@@ -0,0 +1,83 @@
+import ResizeObserverController from './ResizeObserverController.js';
+
+/**
+ * Singleton controller class which handles updates of ResizeObserver instances.
+ */
+export default class GlobalResizeObserverController {
+    /**
+     * A mapping from a DOM root node and a respective controller. A root node
+     * could be the main document, a same-origin iframe, or a shadow root.
+     * See https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode
+     * for more info.
+     *
+     * @private {Map<Node, ResizeObserverController>}
+     */
+    rootNodeControllers_ = typeof WeakMap !== 'undefined' ? new WeakMap() : new Map();
+
+    /**
+     * Holds reference to the controller's instance.
+     *
+     * @private {GlobalResizeObserverController}
+     */
+    static instance_ = null;
+
+    /**
+     * Adds observer to observers list.
+     *
+     * @param {Node} rootNode - The root node for which the observer is added.
+     * @param {ResizeObserverSPI} observer - Observer to be added.
+     * @returns {void}
+     */
+    addObserver(rootNode, observer) {
+        let rootNodeController = this.rootNodeControllers_.get(rootNode);
+
+        if (!rootNodeController) {
+            rootNodeController = new ResizeObserverController(rootNode, this);
+            this.rootNodeControllers_.set(rootNode, rootNodeController);
+        }
+        rootNodeController.addObserver(observer);
+    }
+
+    /**
+     * Removes observer from observers list.
+     *
+     * @param {Node} rootNode - The root node from which the observer is removed.
+     * @param {ResizeObserverSPI} observer - Observer to be removed.
+     * @returns {void}
+     */
+    removeObserver(rootNode, observer) {
+        const rootNodeController = this.rootNodeControllers_.get(rootNode);
+
+        if (rootNodeController) {
+            rootNodeController.removeObserver(observer);
+        }
+    }
+
+    /**
+     * Invokes the update of observers. It will continue running updates insofar
+     * it detects changes.
+     *
+     * @param {Node} rootNode - The root node to refresh.
+     * @returns {void}
+     */
+    refresh(rootNode) {
+        const rootNodeController = this.rootNodeControllers_.get(rootNode);
+
+        if (rootNodeController) {
+            rootNodeController.refresh();
+        }
+    }
+
+    /**
+     * Returns instance of the GlobalResizeObserverController.
+     *
+     * @returns {GlobalResizeObserverController}
+     */
+    static getInstance() {
+        if (!this.instance_) {
+            this.instance_ = new GlobalResizeObserverController();
+        }
+
+        return this.instance_;
+    }
+}

src/ResizeObservation.js

@@ -12,6 +12,15 @@ export default class ResizeObservation {
      */
     target;
 
+    /**
+     * The root node of the observed element at the time of subscription. If
+     * the root node of the element changes, the `ResizeObserver` implementation
+     * will resubscribe.
+     *
+     * @type {Node}
+     */
+    rootNode;
+
     /**
      * Broadcasted width of content rectangle.
      *
@@ -37,9 +46,12 @@ export default class ResizeObservation {
      * Creates an instance of ResizeObservation.
      *
      * @param {Element} target - Element to be observed.
+     * @param {Node} rootNode - The root node of the element at the time
+     * of subscription.
      */
-    constructor(target) {
+    constructor(target, rootNode) {
         this.target = target;
+        this.rootNode = rootNode;
     }
 
     /**

src/ResizeObserver.js

@@ -1,5 +1,5 @@
+import GlobalResizeObserverController from './GlobalResizeObserverController.js';
 import {Map} from './shims/es6-collections.js';
-import ResizeObserverController from './ResizeObserverController.js';
 import ResizeObserverSPI from './ResizeObserverSPI.js';
 
 // Registry of internal observers. If WeakMap is not available use current shim
@@ -26,7 +26,7 @@ class ResizeObserver {
             throw new TypeError('1 argument required, but only 0 present.');
         }
 
-        const controller = ResizeObserverController.getInstance();
+        const controller = GlobalResizeObserverController.getInstance();
         const observer = new ResizeObserverSPI(callback, controller, this);
 
         observers.set(this, observer);