arcgis-map web component shadow root is not implemented correctly

[jlczapski]

IMPORTANT

• My question is related to the samples and content within this repository. For all other issues, open a ticket with Esri Technical Support or post your question in the community forum.
• I have checked for existing issues to avoid duplicates. If someone has already opened an issue for what you are experiencing, please add a 👍 reaction and comment as necessary to the existing issue instead of creating a new one. You can also refer to this repo's troubleshooting guide for hints and suggestions.

Actual behavior

The .shadowRoot property of the arcgis-map component refers to itself, rather than a ShadowRoot object. We discovered this when trying to use Playwright's codegen feature to build tests for our application using the new arcgis components.

This issue causes an infinite recursion error in Playwright's codegen tool. See comment here

Expected behavior

.shadowRoot property of an arcgis web component should return a ShadowRoot object, not the element itself.

Reproduction sample

https://github.com/jlczapski/arcgis-web-components

Reproduction steps

1. git clone https://github.com/jlczapski/arcgis-web-components
2. pnpm i
3. pnpm dev
4. Open browser
5. Find arcgis-map components in devtools
6. In console, $0.shadowRoot returns <arcgis-map item-id="e691172598f04ea8881cd2a4adaa45ba" zoom="4" hydrated="">...</arcgis-map>

Reproduction browser

Chrome 134 on Windows 11

Operating System (check https://whatsmyos.com)

• OS: Windows 11 64-bit
• Device: Dell Precision 3560

[jlczapski]

Having tested using a previous version of @arcgis/core and @arcgis/map-components, the issue is not present in 4.31.6, it only appears in version 4.32.0 and later.

Related to this change?

[odoe]

The Map Components do not use shadow DOM yet, so not sure what the expectation would be when trying to access it. In the CDN, it's null.

Looks like it is null in npm 4.33 next builds too.

[andygup]

@jlczapski thanks for reporting, this was a bug in version 4.32 that's been fixed in 4.33, which is tentatively scheduled for release in June 2025. Can you retest using our next build via @arcgis/map-components@next?

There are also two workarounds:

• use testing-library runtime API over playwright api (example: https://github.com/maxpatiiuk/esri-dev-summit-presentations/blob/e529df4f11a21a3de4265e749b7a06cc7c034c7e/2025/build-tooling/demo/final/src/tests/App.test.tsx#L1)
• This most likely affects only some playwright utilities - you can avoid those utilities and do the corresponding DOM work manually

[maxpatiiuk]

An additional workaround (might be the simplest option): jlczapski/arcgis-web-components#1

[jlczapski]

@andygup can confirm the next build does fix the issue. Will use the workarounds whilst waiting on the 4.33 release. Thank you for the response.

[andygup]

@jlczapski yes, the fix is in @arcgis/map-components@next. Let us know how it goes.