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

[hoogw]

Here is sample code, 

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

if you move 

    <arcgis-basemap-gallery position="top-right"></arcgis-basemap-gallery>

outside of 

   </arcgis-map>

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 solution]

the sample works fine, is because 

  <arcgis-basemap-gallery position="top-right"></arcgis-basemap-gallery>

is inside of 

   </arcgis-map>

tag, 

[ReneRubalcava · Accepted solution]

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]

based on your advice, I test it like this, it does not work. Unless I did it not the way you means. Please use this online sample as test, explain what you exactly means, how to use reference element?

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

[hoogw · Accepted solution]

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 

 

 

[ReneRubalcava · Accepted solution]

"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