Add ability to use window instead of body for click events

README.md

@@ -31,6 +31,14 @@ For example, a button that triggers a popup must be excluded. Otherwise, it will
 
 The `ClickOutside` component has an `exclude` prop that expects an array of DOM nodes. Clicks on those nodes or their children will be ignored.
 
+## Scope of higher DOM element
+
+By default, `clickoutside` events will be fired for clicks on the DOM's `body`. If you'd prefer to use `window` as a reference (e.g. so the event is fired when elements beyond the scope of `body` are clicked), add the `useWindow` prop:
+
+```
+  <ClickOutside on:clickoutside={hidePanel} useWindow>
+```
+
 ## Example: Show/hide panel
 
 ```html

src/body.svelte

@@ -0,0 +1 @@
+<svelte:body on:click />

src/index.svelte

@@ -1,11 +1,16 @@
 <script>
   import { createEventDispatcher } from 'svelte';
 
+  import Body from './body.svelte';
+  import Window from './window.svelte';
+
   export let exclude = [];
+  export let useWindow = false;
 
   let child;
 
   const dispatch = createEventDispatcher();
+  const domScope = useWindow ? Window : Body;
 
   function isExcluded(target) {
     var parent = target;
@@ -28,7 +33,7 @@
   }
 </script>
 
-<svelte:body on:click={onClickOutside} />
+<svelte:component this={domScope} on:click={onClickOutside} />
 <div bind:this={child}>
   <slot></slot>
 </div>

src/window.svelte

@@ -0,0 +1 @@
+<svelte:window on:click />