topic Re: DOM element can not be queried by querySelector after added into to MapView.ui in ArcGIS JavaScript Maps SDK Questions

DOM element can not be queried by querySelector after added into to MapView.ui with v4.34

AllenHuang — Tue, 18 Nov 2025 14:30:21 GMT

In JS API v4.34, I'm trying to add DOM element to the map view MapView.ui.add().

The element is added to the map slot (used to be position) correctly, however, when I tried to use querySelector to look for it by id or class name, querySelector wouldn't be able to find it in from the root document and returns null.

I also observed that style definition define in the css file on the same id or class name would not apply either.

Here is a sample code

js script

//When using v4.34 let infoPanel = document.createElement('DIV'); infoPanel.className = 'infoPanel border'; infoPanel.innerHTML = 'Info Panel'; infoPanel.style.borderWidth = '1px'; infoPanel.style.borderColor = 'blue'; infoPanel.style.borderStyle = 'solid'; let arcgisMap = document.querySelector('arcgis-map'); arcgisMap.view.ui.add(infoPanel, 'top-right'); // a element would be added to the top-right corner of the map with text 'Info Panel' enclosed by a blue border with squared corners and transparent background console.log(document.querySelector('arcgis-map')) //console print out null

css file

.infoPanel, #panelHeader { background-color: white; border-radius: 0.5rem 0.5rem 0rem 0rem; } /* this is suppose to modify the element with corned top corners and a white background. But these styles was not reflected by the generated element by the JS script */

Is this a bug? This code worked properly in v4.33

Re: DOM element can not be queried by querySelector after added into to MapView.ui

ReneRubalcava — Mon, 17 Nov 2025 23:13:40 GMT

See this answer here: https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/componentonready-of-legend-map-componenet-was-not/m-p/1666543/highlight/true#M87887

You can review the components patterns guide for more assistance.

https://developers.arcgis.com/javascript/latest/programming-patterns/

Re: DOM element can not be queried by querySelector after added into to MapView.ui with v4.34

FC_Basson — Wed, 17 Dec 2025 09:55:25 GMT

Instead of defining a class for the div element, you can try setting the "part" attribute, which will be available as a selector for your CSS.

infoPanel.setAttribute("part", "infoPanel border")

Then in the CSS:

*::part(infoPanel) { background-color: white; border-radius: 0.5rem 0.5rem 0rem 0rem; }