basemap gallery component bugs !! automatically disabled if you move tag outside of map tag

Question

Here is sample code, https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=basemap-gallery if you move outside of tag, base map gallery will be disabled automatically. see my screen. even in js, I set document.querySelector("arcgis-basemap-gallery").disabled = false Still not working, still disabled.

hoogw · Accepted Answer

the sample works fine, is because is inside of tag,

RRubalcava · Accepted Answer

When working with the map-components, if a component is not a child of a map or scene component, you can use a "reference-element" attribute to associate them.

* Associate components with a Map or Scene component
* Create a mapping app (tutorial that uses reference-element)
* 12 Days of Map Components Day 1 (yt short on reference-element)

hoogw · Accepted Answer

Here is how to use reference element,

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

warning:  when you use reference element in html tag, you must use exact word "reference-element"

when you use reference element in javascript, must use exact word "referenceElement"

They are not interchangable, otherwise, will not work.

Based on this theory, I correct the online sample as following

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=basemap-gallery

RRubalcava · Accepted Answer

"reference-element" is the attribute name, only to be used declaratively.

"referenceElement" is the property name, which be accessed via "element.referenceElement". It would also be used in jsx syntax for various UI libraries.

https://developers.arcgis.com/javascript/latest/programming-patterns/#attributes-and-properties