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
