[🐛 Bug]: CustomElements in an IFrame are not rendered in Chrome, when the parent frame accesses `contentWindow`

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

9.12.0

Node.js Version

v22.13.1

Mode

WDIO Testrunner

Which capabilities are you using?

capabilities: [{browserName: 'chrome',}],

What happened?

I created a repository to reproduce the bug: https://github.com/htho/wdio-repro-collection

• There is a parent page that has an iframe.
• The parent page accesses the iframes contentWindow property, right after the iframe appears in the DOM.
  • (At this moment the iframes location is about:blank).
• The iframes document has a custom element.
• customElements.define is called after the element appears in the DOM.
  • (This is the same as if the element is defined in a module).

The custom element is not instantiated.

This only happens in chrome, and only when WebdriverIO automates the browser.

This only happens when the parent accesses contentWindow AND when customElements.define is called asynchronously.

For completeness sake here the shortened html - the complete markup is in the repository.

<!-- outer.html -->
<iframe id="myIframe" src="inner.html"></iframe>
<script>
    console.log(/** @type {HTMLIFrameElement} */ (myIframe).contentWindow.document.location.href);
    // logs "about:blank"
</script>

<!-- inner.html -->
<my-element></my-element>
<script>
    class MyCustomElement extends HTMLElement {
        connectedCallback() {
            this.insertAdjacentHTML("afterbegin", "<p>hi</p>")
        }
    }
    // define is called after the element is in the DOM.
    // This is the same as if the element was defined in a module.
    window.customElements.define("my-element", MyCustomElement)
</script>

What is your expected behavior?

The custom element should be instantiated. (Basically the same as in Firefox and when not automated).

How to reproduce the bug.

git clone https://github.com/htho/wdio-repro-collection.git
cd wdio-repro-collection
npm ci

npm run test:iframeDifference

Relevant log output

none

Code of Conduct

• I agree to follow this project's Code of Conduct

Is there an existing issue for this?

• I have searched the existing issues