initialize visibility on re-slotted/re-attached hotspot elements (#5161)

When a hotspot's light DOM element is shifted in the children list (e.g., because another hotspot is deleted in a reactive UI loop), the browser detaches and re-attaches (re-slots) the element.
While the core AnnotationMixin correctly reuses the existing Three.js Hotspot instance and increments its reference count, the newly attached DOM button element never receives the current visibility attributes (such as `data-visible`) because the hotspot's general visibility state has not transitioned. This leaves the re-slotted buttons in a hollow, invisible, or un-annotated state depending on CSS selectors matching :not([data-visible]).
This patch updates the addHotspot path in the AnnotationMixin to immediately set the visibility attribute and dispatch the target `hotspot-visibility` custom event on the incoming node when its associated Hotspot object already exists. This guarantees that re-slotted elements inherit and render with the correct Three.js visibility states instantly.

Author: diegoteran

packages/model-viewer/src/features/annotation.ts

@@ -253,6 +253,16 @@ export const AnnotationMixin = <T extends Constructor<ModelViewerElementBase>>(
 
       if (hotspot != null) {
         hotspot.increment();
+        const visibilityAttribute = node.dataset.visibilityAttribute;
+        if (visibilityAttribute != null) {
+          const attributeName = `data-${visibilityAttribute}`;
+          node.toggleAttribute(attributeName, hotspot.facingCamera);
+        }
+        node.dispatchEvent(new CustomEvent('hotspot-visibility', {
+          detail: {
+            visible: hotspot.facingCamera,
+          },
+        }));
       } else {
         hotspot = new Hotspot({
           name: node.slot,