fix(popper): [tooltip,popover] fix popper doms in custom element, cant get zindex (#3125)

* fix(popper): fix popper doms in custom element, cant get zindex

* fix(utils): update packages's versions

Author: shenjunjian

packages/renderless/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.21.1",
+  "version": "3.21.2",
   "private": true,
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
@@ -36,8 +36,8 @@
     "release": "esno ./scripts/postbuild.ts && shx cp README.md dist"
   },
   "dependencies": {
-    "color": "4.2.3",
-    "@opentiny/utils": "workspace:~"
+    "@opentiny/utils": "workspace:~",
+    "color": "4.2.3"
   },
   "devDependencies": {
     "esno": "^4.7.0",

packages/renderless/src/common/deps/popper.ts

@@ -77,6 +77,10 @@ const isFixed = (el: HTMLElement) => {
     return true
   }
 
+  // 处理遇到 shadowRoot的情况
+  if (el.host) {
+    el = el.host
+  }
   return el.parentNode ? isFixed(el.parentNode as HTMLElement) : false
 }
 

packages/renderless/src/common/deps/vue-popper.ts

@@ -59,6 +59,11 @@ const getReferMaxZIndex = (reference) => {
   do {
     reference = reference.parentNode
 
+    // 处理遇到shadowRoot的情况
+    if (reference && reference instanceof ShadowRoot && reference.host) {
+      reference = reference.host
+    }
+
     if (reference) {
       z = getZIndex(reference)
     } else {

packages/renderless/src/grid/utils/dom.ts

@@ -180,11 +180,15 @@ export const colToVisible = ($table, column, move) => {
 }
 
 export const hasDataTag = (el, value) => {
-  // el可能为shadow-root，shadow-root没有getAttribute方法
-  if (!el || !value || !el.getAttribute) {
+  if (!el || !value) {
     return false
   }
 
+  // 处理遇到 shadowRoot的情况
+  if (el.host) {
+    el = el.host
+  }
+
   return (' ' + el.getAttribute('data-tag') + ' ').includes(' ' + value + ' ')
 }