feat: add shadow support

packages/popover/src/main.vue

@@ -27,7 +27,7 @@
 import Popper from 'element-ui/src/utils/vue-popper';
 import { on, off } from 'element-ui/src/utils/dom';
 import { addClass, removeClass } from 'element-ui/src/utils/dom';
-import { generateId } from 'element-ui/src/utils/util';
+import { generateId, calcShadowRootEvent } from 'element-ui/src/utils/util';
 
 export default {
   name: 'ElPopover',
@@ -197,12 +197,14 @@ export default {
       if (!reference && this.$refs.wrapper.children) {
         reference = this.referenceElm = this.$refs.wrapper.children[0];
       }
+
+      const event = calcShadowRootEvent(e);
       if (!this.$el ||
         !reference ||
-        this.$el.contains(e.target) ||
-        reference.contains(e.target) ||
+        this.$el.contains(event) ||
+        reference.contains(event) ||
         !popper ||
-        popper.contains(e.target)) return;
+        popper.contains(event)) return;
       this.showPopper = false;
     },
     handleAfterEnter() {

src/utils/clickoutside.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { on } from 'element-ui/src/utils/dom';
+import { calcShadowRootEvent } from 'element-ui/src/utils/util';
 
 const nodeList = [];
 const ctx = '@@clickoutsideContext';
@@ -15,16 +16,25 @@ let seed = 0;
 
 function createDocumentHandler(el, binding, vnode) {
   return function(mouseup = {}, mousedown = {}) {
+    const event = {
+      mouseup: {
+        target: calcShadowRootEvent(mouseup)
+      },
+      mousedown: {
+        target: calcShadowRootEvent(mousedown)
+      }
+    };
+
     if (!vnode ||
       !vnode.context ||
-      !mouseup.target ||
-      !mousedown.target ||
-      el.contains(mouseup.target) ||
-      el.contains(mousedown.target) ||
-      el === mouseup.target ||
+      !event.mouseup.target ||
+      !event.mousedown.target ||
+      el.contains(event.mouseup.target) ||
+      el.contains(event.mousedown.target) ||
+      el === event.mouseup.target ||
       (vnode.context.popperElm &&
-      (vnode.context.popperElm.contains(mouseup.target) ||
-      vnode.context.popperElm.contains(mousedown.target)))) return;
+      (vnode.context.popperElm.contains(event.mouseup.target) ||
+      vnode.context.popperElm.contains(event.mousedown.target)))) return;
 
     if (binding.expression &&
       el[ctx].methodName &&

src/utils/popper.js

@@ -1057,7 +1057,7 @@
             return element;
         }
 
-        if (parent === root.document) {
+        if (parent === root.document || element.nodeType === 11) {
             // Firefox puts the scrollTOp value on `documentElement` instead of `body`, we then check which of them is
             // greater than 0 and return the proper element
             if (root.document.body.scrollTop || root.document.body.scrollLeft) {
@@ -1090,7 +1090,7 @@
      * @returns {Boolean} answer to "isFixed?"
      */
     function isFixed(element) {
-        if (element === root.document.body) {
+        if (element === root.document.body || element.nodeType === 11) {
             return false;
         }
         if (getStyleComputedProperty(element, 'position') === 'fixed') {

src/utils/util.js

@@ -239,3 +239,11 @@ export function objToArray(obj) {
   }
   return isEmpty(obj) ? [] : [obj];
 }
+
+export function calcShadowRootEvent(e) {
+  let event = e.target;
+  if (e.target.shadowRoot && e.target.shadowRoot.toString() === '[object ShadowRoot]') {
+    event = e.composedPath()[0];
+  }
+  return event;
+}