From 1f642bddf483e2625a4f1fa4158c0b8331f04d32 Mon Sep 17 00:00:00 2001
From: Nathan Faucett <nathanfaucett@gmail.com>
Date: Sun, 4 Dec 2022 10:25:06 -0500
Subject: [PATCH] use ownerDocument or node, use restProps on parent node, set
 mode to immutable

---
 src/Portal.svelte             |  6 ++++--
 test/Portal.test.js           | 12 ++++++++++++
 test/TestPortalWrapper.svelte |  5 +++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/Portal.svelte b/src/Portal.svelte
index 510a1a5..a4f6999 100644
--- a/src/Portal.svelte
+++ b/src/Portal.svelte
@@ -1,6 +1,7 @@
+<svelte:options immutable />
+
 <script context="module">
   import { tick } from "svelte";
-
   /**
    * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
    *
@@ -8,6 +9,7 @@
    * @param {HTMLElement|string} target DOM Element or CSS Selector
    */
   export function portal(el, target = "body") {
+    const document = el.ownerDocument;
     let targetEl;
     async function update(newTarget) {
       target = newTarget;
@@ -57,6 +59,6 @@
   export let target = "body";
 </script>
 
-<div use:portal={target} hidden>
+<div {...$$restProps} use:portal={target} hidden>
   <slot />
 </div>
diff --git a/test/Portal.test.js b/test/Portal.test.js
index 2a840fc..39ea7c5 100644
--- a/test/Portal.test.js
+++ b/test/Portal.test.js
@@ -36,6 +36,18 @@ describe("<Portal /> target", () => {
     expect(renderedDivInTargetClass).not.toBe(null);
   });
 
+  it("should be rendererd in the default HTML element (document.body) with attributes on parent", () => {
+    const renderedInDefaultWithProps = wrapper.querySelector(
+      "body #renderedInDefaultWithAttributes"
+    );
+
+    expect(renderedInDefaultWithProps).not.toBe(null);
+    expect(renderedInDefaultWithProps.parentNode).not.toBe(null);
+    expect(renderedInDefaultWithProps.parentNode.style.position).toBe(
+      "absolute"
+    );
+  });
+
   it("should not render a Portal at the origin", () => {
     const portalContainer = wrapper.querySelector("#portalCtn");
     const isPortalContainerEmpty =
diff --git a/test/TestPortalWrapper.svelte b/test/TestPortalWrapper.svelte
index 624d29b..34a0251 100644
--- a/test/TestPortalWrapper.svelte
+++ b/test/TestPortalWrapper.svelte
@@ -14,6 +14,11 @@
       <Portal target="body > .target">
         <div id="renderedInTargetClass"></div>
       </Portal>
+      <Portal
+        style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"
+      >
+        <div id="renderedInDefaultWithAttributes"></div>
+      </Portal>
     </div>
   </main>