feat(popover,hovercard): DP-175404 support externalAnchorElement (#1108)

Author: braddialpad

packages/dialtone-vue/components/hovercard/hovercard.vue

@@ -16,6 +16,7 @@
     :header-class="headerClass"
     :footer-class="footerClass"
     :append-to="appendTo"
+    :external-anchor-element="externalAnchorElement"
     data-qa="dt-hovercard"
     :enter-delay="enterDelay"
     :leave-delay="leaveDelay"
@@ -203,6 +204,15 @@ const props = defineProps({
     type: Number,
     default: TOOLTIP_DELAY_MS,
   },
+
+  /**
+   * External anchor element reference. Use this instead of the anchor slot when
+   * the anchor may be inside a Shadow DOM, as querySelector cannot pierce shadow boundaries.
+   */
+  externalAnchorElement: {
+    type: HTMLElement,
+    default: null,
+  },
 });
 
 defineEmits([

packages/dialtone-vue/components/popover/popover.vue

@@ -281,12 +281,22 @@ export default {
     /**
      * External anchor id to use in those cases the anchor can't be provided via the slot.
      * For instance, using the combobox's input as the anchor for the popover.
+     * @deprecated Use externalAnchorElement instead for Shadow DOM compatibility.
      */
     externalAnchor: {
       type: String,
       default: '',
     },
 
+    /**
+     * External anchor element reference. Use this instead of externalAnchor when
+     * the anchor may be inside a Shadow DOM, as querySelector cannot pierce shadow boundaries.
+     */
+    externalAnchorElement: {
+      type: HTMLElement,
+      default: null,
+    },
+
     /**
      * The id of the tooltip
      */
@@ -642,6 +652,10 @@ export default {
       });
     },
 
+    externalAnchorElement () {
+      this.updateAnchorEl();
+    },
+
     placement (placement) {
       this.tip?.setProps({
         placement,
@@ -718,9 +732,10 @@ export default {
     },
 
     updateAnchorEl () {
-      const externalAnchorEl = this.externalAnchor
-        ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`)
-        : null;
+      const externalAnchorEl = this.externalAnchorElement ||
+        (this.externalAnchor
+          ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`)
+          : null);
       const anchorEl = externalAnchorEl ?? this.$refs.anchor.children[0];
       if (anchorEl === this.anchorEl) {
         return;