Skip to content

Conversation

@dvoytenko
Copy link

@dvoytenko dvoytenko commented Jan 5, 2021

Closes #78

This pull request enables the ResizeObserver polyfill to be used with targets inside the shadow roots and same origin iframes.

The key implementation details:

  1. A "root" is essentially what's expected to be returned by the Node.getRootNode() and can be a main document, a shadow root, or a same-origin iframe document. The event listeners and mutation observers respect these root-node boundaries, hence each root has to be handled individually.
  2. The ResizeObserverController is split into two classes: GlobalResizeObserverController (the global singleton used for all DOM roots) and ResizeObserverController (now used only for a single root). Most of the code inside the ResizeObserverController is completely unchanged - it simply uses the supplied rootNode instead of the global document and window objects.
  3. When available, this pull request also uses IntersectionObserver. It's not strictly necessary, but it helps to be notified when a node is moved between the roots. It's rather uncommon, but IMHO the cost of using a native IntersectionObserver for this is relatively low.
  4. All the relevant existing tests are combined into a single spec function and executed for all three modes: main DOM, shadow DOM, and iframe.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support shadow DOM and same-origin iframes

2 participants