I’m reviewing the following pull request, which involves extensive changes throughout the codebase, as we now need to define our own ways to access certain properties in the DOM.

The point of these functions is to ensure that we are using ‘pure’ versions of the underlying DOM functions in the case that they have been monkeypatched via 3rd party code; so as such we don’t really want to try to monkeypatch them again:

@@ -1079,8 +1081,8 @@ export function serializeNodeWithId(
     recordChild = recordChild && !serializedNode.needBlock;
     // this property was not needed in replay side
     delete serializedNode.needBlock;
-    const shadowRoot = (n as HTMLElement).shadowRoot;
-    if (shadowRoot && isNativeShadowDom(shadowRoot))
+    const shadowRootEl = shadowRoot(n);
+    if (shadowRootEl && isNativeShadowDom(shadowRootEl))
       serializedNode.isShadowHost = true;
   }
   if (

and e.g.

     ) {
       // value parameter in DOM reflects the correct value, so ignore childNode
     } else {
-      for (const childN of Array.from(n.childNodes)) {
+      for (const childN of Array.from(childNodes(n))) {
         const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
         if (serializedChildNode) {
           serializedNode.childNodes.push(serializedChildNode);

If we implement the above changes, we’d need to ensure that no future developers (or ourselves) regresses and adds code which directly accesses these selected attributes.

My queestion is whether it is possible to do this transformation as an optional build step?

E.g. if there is any way to redefine the typescript types for the built in Element/Node classes corresponding to the DOM versions such that they compile differently to JavaScript, or maybe some other build step that we can add before/after the typescript compilation in order to achieve the same thing?

Any pointers towards a solution that doesn’t involve rewriting the codebase in this way appreciated!