improve <Portal/> container, add 2 new properties

- `asElement` allows to change Portal container element type
- `class` allows to set class for Portal container

Author: ngdangtu-vn

packages/solid/web/src/index.ts

@@ -63,6 +63,8 @@ export function Portal<T extends boolean = false, S extends boolean = false>(pro
         el: (T extends true ? { readonly shadowRoot: ShadowRoot } : {}) &
           (S extends true ? SVGGElement : HTMLDivElement)
       ) => void);
+  asElement?: keyof HTMLElementTagNameMap;
+  class?: string[];
   children: JSX.Element;
 }) {
   const { useShadow } = props,
@@ -84,11 +86,13 @@ export function Portal<T extends boolean = false, S extends boolean = false>(pro
         createRoot(dispose => insert(el, () => (!clean() ? content!() : dispose()), null));
         onCleanup(cleanup);
       } else {
-        const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
-          renderRoot =
-            useShadow && container.attachShadow
-              ? container.attachShadow({ mode: "open" })
-              : container;
+        const container = createElement(props.isSVG ? "g" : props.asElement || "div", props.isSVG);
+        props.class && container.classList.add(...props.class.flatMap(str => str.split(" ")));
+
+        const renderRoot =
+          useShadow && container.attachShadow
+            ? container.attachShadow({ mode: "open" })
+            : container;
 
         Object.defineProperty(container, "_$host", {
           get() {

packages/solid/web/test/portal.spec.tsx

@@ -25,6 +25,56 @@ describe("Testing a simple Portal", () => {
   });
 });
 
+describe("Testing an Portal custom container", () => {
+  let div = document.createElement("div"),
+    disposer: () => void;
+  const testMount = document.createElement("div");
+  const Component = () => (
+    <Portal mount={testMount} asElement="section">
+      Hi
+    </Portal>
+  );
+
+  test("Create portal control flow", () => {
+    disposer = render(Component, div);
+    expect(div.innerHTML).toBe("");
+    const container = testMount.firstChild as HTMLElement & { _$host: HTMLElement };
+    expect(container.tagName).toBe("SECTION");
+    expect(container.innerHTML).toBe("Hi");
+    expect(container._$host).toBe(div);
+  });
+
+  test("dispose", () => {
+    disposer();
+    expect(div.innerHTML).toBe("");
+  });
+});
+
+describe('Testing Portal "class" property', () => {
+  let div = document.createElement("div"),
+    disposer: () => void;
+  const testMount = document.createElement("div");
+  const Component = () => (
+    <Portal mount={testMount} class={["flex flex-col", "text-gold bg-red"]}>
+      ★
+    </Portal>
+  );
+
+  test("Create portal control flow", () => {
+    disposer = render(Component, div);
+    expect(div.innerHTML).toBe("");
+    const container = testMount.firstChild as HTMLElement & { _$host: HTMLElement };
+    expect(container.classList.toString()).toBe("flex flex-col text-gold bg-red");
+    expect(container.innerHTML).toBe("★");
+    expect(container._$host).toBe(div);
+  });
+
+  test("dispose", () => {
+    disposer();
+    expect(div.innerHTML).toBe("");
+  });
+});
+
 describe("Testing an SVG Portal", () => {
   let div = document.createElement("div"),
     disposer: () => void;