@abstraxn/signer-react 3.3.10 → 4.0.0

package/dist/src/components/OnboardingUI/OnboardingUIWeb.js

@@ -1,4 +1,8 @@
 import { isValidEmail } from "@abstraxn/signer-core";
+import { abstraxnLogoSvgHtml } from "../AbstraxnLogo";
+import { createOnboardingShadowContainer } from "./onboardingShadowContainer";
+import { queryAllAcrossShadowRoots } from "../../utils/shadowRegistry";
+import { getDeepActiveElement } from "../../utils/shadowFocus";
 // CSS styles embedded as string
 const ONBOARDING_UI_STYLES = `
 .onboarding-container {
@@ -19,6 +23,12 @@ const ONBOARDING_UI_STYLES = `
 .onboarding-container.onboarding-inline {
   min-height: auto;
   padding: 0;
+  justify-content: flex-start;
+}
+
+.onboarding-container.onboarding-inline .onboarding-card {
+  max-height: none;
+  overflow-y: visible;
 }
 
 /* Modal Styles */
@@ -108,6 +118,99 @@ const ONBOARDING_UI_STYLES = `
   padding: 0;
 }
 
+/* Close (X) button — absolutely positioned in the modal's top-right corner.
+   Anchored against .onboarding-modal-content, which is already position: relative. */
+.onboarding-modal-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.onboarding-modal-close:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+  color: #111827;
+}
+
+.onboarding-modal-close.onboarding-theme-dark {
+  color: #9ca3af;
+}
+
+.onboarding-modal-close.onboarding-theme-dark:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  color: #f9fafb;
+}
+
+/* Back button — used on the OTP and MFA verification screens */
+.onboarding-otp-back-button {
+  align-self: flex-start;
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent !important;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #6b7280 !important;
+  padding: 0;
+  margin: 0;
+  box-shadow: none !important;
+}
+
+.onboarding-otp-back-button svg {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.onboarding-otp-back-button:hover:not(:disabled) {
+  background-color: #f3f4f6 !important;
+  color: #111827 !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+}
+
+.onboarding-otp-back-button:active:not(:disabled) {
+  background-color: #e5e7eb !important;
+  transform: scale(0.95);
+}
+
+.onboarding-otp-back-button:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.onboarding-theme-dark .onboarding-otp-back-button {
+  background-color: transparent !important;
+  color: #9ca3af !important;
+  box-shadow: none !important;
+}
+
+.onboarding-theme-dark .onboarding-otp-back-button:hover:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+}
+
+.onboarding-theme-dark .onboarding-otp-back-button:active:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+}
+
 /* Light Theme */
 .onboarding-theme-light {
   color: #000000;
@@ -770,7 +873,9 @@ const ONBOARDING_UI_STYLES = `
 .onboarding-otp-verification .onboarding-button {
   /* Match OTP inputs width: 6 inputs × 44px + 5 gaps × 10px = 314px */
   width: 314px;
-  max-width: 314px;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .onboarding-otp-icon-container {
@@ -975,6 +1080,51 @@ const ONBOARDING_UI_STYLES = `
   cursor: not-allowed;
 }
 
+.onboarding-mfa-trouble-text {
+  font-size: 14px;
+  margin: -6px 0 16px;
+  color: #6b7280;
+  text-align: center;
+}
+
+.onboarding-theme-dark .onboarding-mfa-trouble-text {
+  color: #9ca3af;
+}
+
+.onboarding-mfa-backup-link {
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0;
+  text-decoration: underline;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  font-family: inherit;
+  line-height: inherit;
+  box-shadow: none !important;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.onboarding-theme-light .onboarding-mfa-backup-link {
+  color: #111827;
+}
+
+.onboarding-theme-dark .onboarding-mfa-backup-link {
+  color: #e5e7eb;
+}
+
+.onboarding-mfa-backup-link:hover:not(:disabled) {
+  opacity: 0.8;
+}
+
+.onboarding-mfa-backup-link:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .onboarding-otp-resend {
   text-align: center;
   margin-top: 20px;
@@ -1081,7 +1231,15 @@ const ONBOARDING_UI_STYLES = `
  * Works with vanilla JavaScript - no framework dependencies required.
  */
 export class OnboardingUIWeb {
-    static stylesInjected = false;
+    // Instance-level, not class-static: each instance now owns its own shadow
+    // root (see shadowContainer below), so a shared class-static flag would
+    // wrongly make a second instance skip injecting styles into its own new
+    // shadow root, leaving it completely unstyled.
+    stylesInjected = false;
+    shadowContainer = null;
+    shadowTeardown = null;
+    /** Pending OAuth loader timer from checkUrlParams — cleared in destroy() so StrictMode cleanup cannot paint into a torn-down shadow root. */
+    pendingLoadingModalTimer = null;
     config;
     container = null;
     rootElement = null;
@@ -1150,10 +1308,48 @@ export class OnboardingUIWeb {
             this.externalWalletDivider.style.display = "";
         }
     }
+    /** True when this instance still owns an attached shadow container. */
+    hasLiveShadow() {
+        return !!this.shadowContainer?.isConnected;
+    }
+    /**
+     * Rebuild the shadow tree if destroy()/StrictMode tore it down.
+     * Safe to call before showLoadingModal / showOnboarding recovery paths.
+     */
+    ensureLiveShadow() {
+        if (this.hasLiveShadow())
+            return;
+        this.init();
+    }
     /**
      * Initialize and render the component
      */
     init() {
+        // Re-init after destroy / StrictMode: drop any stale host first so we never
+        // accumulate orphaned shadow roots on document.body.
+        if (this.shadowTeardown) {
+            try {
+                this.shadowTeardown();
+            }
+            catch {
+                // Ignore teardown errors on a partially-detached host.
+            }
+            this.shadowTeardown = null;
+            this.shadowContainer = null;
+            this.stylesInjected = false;
+            this.modalOverlay = null;
+        }
+        const shadow = createOnboardingShadowContainer();
+        this.shadowContainer = shadow.container;
+        this.shadowTeardown = shadow.teardown;
+        // Same inline stacking-context-defense styles as the React ShadowHost —
+        // prevents ordinary host-page global CSS from promoting this host into
+        // its own stacking context and trapping the modal's z-index inside it.
+        shadow.hostElement.style.position = "static";
+        shadow.hostElement.style.zIndex = "auto";
+        shadow.hostElement.style.transform = "none";
+        shadow.hostElement.style.opacity = "1";
+        shadow.hostElement.style.isolation = "auto";
         this.injectStyles();
         this.setupContainer();
         this.render();
@@ -1187,8 +1383,16 @@ export class OnboardingUIWeb {
                 // Don't show "Verifying login..." - provider will show MFA screen instead; avoid it appearing after MFA modal
                 return;
             }
+            if (this.pendingLoadingModalTimer !== null) {
+                clearTimeout(this.pendingLoadingModalTimer);
+                this.pendingLoadingModalTimer = null;
+            }
             requestAnimationFrame(() => {
-                setTimeout(() => {
+                this.pendingLoadingModalTimer = setTimeout(() => {
+                    this.pendingLoadingModalTimer = null;
+                    // Skip if destroy() already ran (StrictMode cleanup) — remount re-inits and shows the loader.
+                    if (!this.hasLiveShadow())
+                        return;
                     this.showLoadingModal();
                 }, 100);
             });
@@ -1301,6 +1505,7 @@ export class OnboardingUIWeb {
             // OK Button
             const okButton = this.createElement("button", {
                 className: "onboarding-button onboarding-button-primary",
+                part: "button-primary",
                 textContent: "OK",
                 style: "width: 100%; max-width: 200px;",
             });
@@ -1354,15 +1559,24 @@ export class OnboardingUIWeb {
      * Public method to allow external access
      */
     showLoadingModal() {
-        // Hide any other modals that might be showing (wallet selection, etc.)
-        const otherModals = document.querySelectorAll(".onboarding-modal-overlay, .external-wallet-modal, .wallet-modal-overlay");
+        // Shadow DOM: the loader must live inside this instance's shadow container.
+        // After StrictMode destroy() (or any tear-down), that container is gone —
+        // rebuild before painting, otherwise the overlay is created detached and
+        // never appears (pre-shadow appends went to document.body and survived).
+        this.ensureLiveShadow();
+        if (!this.shadowContainer)
+            return;
+        // Hide any other modals that might be showing (wallet selection, etc.) —
+        // now possibly living in a different shadow root, so this must query
+        // across every registered boundary, not just the real document.
+        const otherModals = queryAllAcrossShadowRoots(".onboarding-modal-overlay, .external-wallet-modal, .wallet-modal-overlay");
         otherModals.forEach((modal) => {
             if (modal.id !== "onboarding-loading-modal-overlay") {
                 modal.style.display = "none";
             }
         });
         // Create modal overlay if it doesn't exist
-        let loadingModalOverlay = document.getElementById("onboarding-loading-modal-overlay");
+        let loadingModalOverlay = this.shadowContainer?.querySelector("#onboarding-loading-modal-overlay");
         if (!loadingModalOverlay) {
             loadingModalOverlay = this.createElement("div", {
                 id: "onboarding-loading-modal-overlay",
@@ -1454,7 +1668,7 @@ export class OnboardingUIWeb {
         `,
             });
             // Add keyframes if not exists
-            if (!document.getElementById("onboarding-spin-style")) {
+            if (!this.shadowContainer?.querySelector("#onboarding-spin-style")) {
                 const style = document.createElement("style");
                 style.id = "onboarding-spin-style";
                 style.textContent = `
@@ -1462,7 +1676,7 @@ export class OnboardingUIWeb {
             to { transform: rotate(360deg); }
           }
         `;
-                document.head.appendChild(style);
+                this.shadowContainer?.appendChild(style);
             }
             // Text
             const text = this.createElement("p", {
@@ -1478,10 +1692,7 @@ export class OnboardingUIWeb {
             loadingCard.appendChild(text);
             // Footer "Powered by Abstraxn"
             if (this.config.showFooter !== false) {
-                const textColor = this.config.colors?.text ||
-                    (this.config.theme === "dark" ? "#9ca3af" : "#6b7280");
-                const brandColor = this.config.colors?.text ||
-                    (this.config.theme === "dark" ? "#e5e7eb" : "#374151");
+                const { textColor, brandColor } = this.getFooterTextColors();
                 const footer = this.createElement("div", {
                     className: "onboarding-footer",
                 });
@@ -1502,24 +1713,7 @@ export class OnboardingUIWeb {
                     "aria-label": "Visit Abstraxn website",
                 });
                 const logoSvg = this.createElement("span", {
-                    innerHTML: `
-            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" style="width: 20px; height: 20px; display: inline-block; vertical-align: middle;">
-              <path d="M47.9082 37.191L23.9541 23.553L0 9.91504L37.7436 -8.13502e-06L47.9082 37.191Z" fill="url(#paint0_linear_1242_781)"/>
-              <path d="M13.5156 46.3594L10.1846 47.2344L8.99219 42.873L12.4365 42.4111L13.5156 46.3594ZM20.4268 44.5566L17.1152 45.4199L16.125 41.8818L19.5566 41.3721L20.4268 44.5566ZM26.9307 42.834L23.6152 43.6982L22.8438 40.9443L26.2744 40.4326L26.9307 42.834ZM33.5078 41.1074L30.1875 41.9727L29.6328 39.9951L33.0635 39.4844L33.5078 41.1074ZM39.998 39.4014L36.6729 40.2686L36.3359 39.0674L39.7656 38.5508L39.998 39.4014ZM10.1406 33.9434L11.6807 39.5762L8.15918 39.7568L6.46094 33.543L10.1406 33.9434ZM17.6582 34.5996L18.8916 39.1113L15.4199 39.3496L14.0078 34.3076L17.6582 34.5996ZM24.8779 35.332L25.8047 38.7227L22.3252 38.959L21.2266 35.0361L24.8779 35.332ZM32.0918 36.0723L32.7119 38.3398L29.2227 38.5723L28.4375 35.7656L32.0918 36.0723ZM43.2373 38.5488L43.1172 38.1172L47.7939 37.3516L43.2373 38.5488ZM39.3047 36.8096L39.6182 37.9561L36.1221 38.1846L35.6484 36.4961L39.3047 36.8096ZM47.7939 37.3516L43.0107 37.7939L42.8516 37.2236L47.7939 37.3516ZM47.8291 37.2988L42.7227 36.7529L42.5547 36.1523L47.8291 37.2988ZM47.8652 37.2412L42.3711 35.3486L42.2031 34.7471L47.8652 37.2412ZM38.748 34.8604L39.0664 36.0254L35.3369 35.4043L34.8594 33.6982L38.748 34.8604ZM31.0576 32.3994L31.6787 34.6709L27.959 34.0566L27.1719 31.2461L31.0576 32.3994ZM38.0811 32.6318L38.4092 33.8301L34.4893 32.3496L34.1543 31.1523C34.1005 30.9591 34.0322 30.7719 33.9531 30.5918L38.0811 32.6318ZM23.3682 29.9385L24.291 33.3164L20.5801 32.71L19.4844 28.7949L23.3682 29.9385ZM15.6641 27.4805L16.8896 31.9629L13.1875 31.3594L11.7812 26.3379L15.6641 27.4805ZM29.9463 28.4678L30.5693 30.748L26.6201 29.2812L25.8633 26.583C25.8534 26.5431 25.8417 26.5028 25.8281 26.4639L29.9463 28.4678ZM7.6875 25.0938L9.21484 30.6816L5.44727 29.959L3.75781 23.7793L7.6875 25.0938ZM21.5312 23.3623L22.4492 26.7227L18.5059 25.2627L17.4141 21.3643L21.5312 23.3623ZM13.6104 20.1602L14.8242 24.6006L10.8887 23.1387L9.49219 18.1553L13.6104 20.1602ZM5.2168 16.0654L6.72559 21.585L2.70703 19.9473L1.06055 13.8701L5.2168 16.0654Z" fill="url(#paint1_linear_1242_781)"/>
-              <defs>
-                <linearGradient id="paint0_linear_1242_781" x1="7.03362" y1="6.09543" x2="47.2003" y2="57.0656" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#F878D2"/>
-                  <stop offset="0.393522" stop-color="#FDCC81"/>
-                  <stop offset="1" stop-color="#F9A0D9"/>
-                </linearGradient>
-                <linearGradient id="paint1_linear_1242_781" x1="2.53739" y1="21.5136" x2="48.7969" y2="38.5742" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#F878D2"/>
-                  <stop offset="0.393522" stop-color="#FDCC81"/>
-                  <stop offset="1" stop-color="#F9A0D9"/>
-                </linearGradient>
-              </defs>
-            </svg>
-          `,
+                    innerHTML: abstraxnLogoSvgHtml({ size: 20, gradientId: "abstraxn_logo_web_error" }),
                     style: "display: inline-flex; align-items: center;",
                 });
                 brandContainer.appendChild(logoSvg);
@@ -1533,7 +1727,7 @@ export class OnboardingUIWeb {
                 loadingCard.appendChild(footer);
             }
             loadingModalOverlay.appendChild(loadingCard);
-            document.body.appendChild(loadingModalOverlay);
+            this.shadowContainer?.appendChild(loadingModalOverlay);
         }
         else {
             // Ensure modal is visible
@@ -1556,7 +1750,7 @@ export class OnboardingUIWeb {
      * Hide loading modal overlay
      */
     hideLoadingModal() {
-        const loadingModalOverlay = document.getElementById("onboarding-loading-modal-overlay");
+        const loadingModalOverlay = this.shadowContainer?.querySelector("#onboarding-loading-modal-overlay");
         if (loadingModalOverlay) {
             loadingModalOverlay.style.display = "none";
             loadingModalOverlay.style.visibility = "hidden";
@@ -1571,7 +1765,7 @@ export class OnboardingUIWeb {
         const displayMessage = this.normalizeErrorMessage(message);
         // Helper function to close error modal
         const closeErrorModal = () => {
-            const overlay = document.getElementById("onboarding-error-modal-overlay");
+            const overlay = this.shadowContainer?.querySelector("#onboarding-error-modal-overlay");
             if (overlay) {
                 overlay.style.display = "none";
                 document.body.style.overflow = "";
@@ -1582,7 +1776,7 @@ export class OnboardingUIWeb {
             }
         };
         // Create modal overlay if it doesn't exist
-        let errorModalOverlay = document.getElementById("onboarding-error-modal-overlay");
+        let errorModalOverlay = this.shadowContainer?.querySelector("#onboarding-error-modal-overlay");
         if (!errorModalOverlay) {
             errorModalOverlay = this.createElement("div", {
                 id: "onboarding-error-modal-overlay",
@@ -1701,6 +1895,7 @@ export class OnboardingUIWeb {
             // OK Button
             const okButton = this.createElement("button", {
                 className: "onboarding-button onboarding-button-primary",
+                part: "button-primary",
                 textContent: "OK",
                 style: "width: 100%; max-width: 200px;",
             });
@@ -1708,10 +1903,7 @@ export class OnboardingUIWeb {
             errorCard.appendChild(okButton);
             // Footer "Powered by Abstraxn"
             if (this.config.showFooter !== false) {
-                const textColor = this.config.colors?.text ||
-                    (this.config.theme === "dark" ? "#9ca3af" : "#6b7280");
-                const brandColor = this.config.colors?.text ||
-                    (this.config.theme === "dark" ? "#e5e7eb" : "#374151");
+                const { textColor, brandColor } = this.getFooterTextColors();
                 const footer = this.createElement("div", {
                     className: "onboarding-footer",
                 });
@@ -1732,24 +1924,7 @@ export class OnboardingUIWeb {
                     "aria-label": "Visit Abstraxn website",
                 });
                 const logoSvg = this.createElement("span", {
-                    innerHTML: `
-            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" style="width: 20px; height: 20px; display: inline-block; vertical-align: middle;">
-              <path d="M47.9082 37.191L23.9541 23.553L0 9.91504L37.7436 -8.13502e-06L47.9082 37.191Z" fill="url(#paint0_linear_error_modal)"/>
-              <path d="M13.5156 46.3594L10.1846 47.2344L8.99219 42.873L12.4365 42.4111L13.5156 46.3594ZM20.4268 44.5566L17.1152 45.4199L16.125 41.8818L19.5566 41.3721L20.4268 44.5566ZM26.9307 42.834L23.6152 43.6982L22.8438 40.9443L26.2744 40.4326L26.9307 42.834ZM33.5078 41.1074L30.1875 41.9727L29.6328 39.9951L33.0635 39.4844L33.5078 41.1074ZM39.998 39.4014L36.6729 40.2686L36.3359 39.0674L39.7656 38.5508L39.998 39.4014ZM10.1406 33.9434L11.6807 39.5762L8.15918 39.7568L6.46094 33.543L10.1406 33.9434ZM17.6582 34.5996L18.8916 39.1113L15.4199 39.3496L14.0078 34.3076L17.6582 34.5996ZM24.8779 35.332L25.8047 38.7227L22.3252 38.959L21.2266 35.0361L24.8779 35.332ZM32.0918 36.0723L32.7119 38.3398L29.2227 38.5723L28.4375 35.7656L32.0918 36.0723ZM43.2373 38.5488L43.1172 38.1172L47.7939 37.3516L43.2373 38.5488ZM39.3047 36.8096L39.6182 37.9561L36.1221 38.1846L35.6484 36.4961L39.3047 36.8096ZM47.7939 37.3516L43.0107 37.7939L42.8516 37.2236L47.7939 37.3516ZM47.8291 37.2988L42.7227 36.7529L42.5547 36.1523L47.8291 37.2988ZM47.8652 37.2412L42.3711 35.3486L42.2031 34.7471L47.8652 37.2412ZM38.748 34.8604L39.0664 36.0254L35.3369 35.4043L34.8594 33.6982L38.748 34.8604ZM31.0576 32.3994L31.6787 34.6709L27.959 34.0566L27.1719 31.2461L31.0576 32.3994ZM38.0811 32.6318L38.4092 33.8301L34.4893 32.3496L34.1543 31.1523C34.1005 30.9591 34.0322 30.7719 33.9531 30.5918L38.0811 32.6318ZM23.3682 29.9385L24.291 33.3164L20.5801 32.71L19.4844 28.7949L23.3682 29.9385ZM15.6641 27.4805L16.8896 31.9629L13.1875 31.3594L11.7812 26.3379L15.6641 27.4805ZM29.9463 28.4678L30.5693 30.748L26.6201 29.2812L25.8633 26.583C25.8534 26.5431 25.8417 26.5028 25.8281 26.4639L29.9463 28.4678ZM7.6875 25.0938L9.21484 30.6816L5.44727 29.959L3.75781 23.7793L7.6875 25.0938ZM21.5312 23.3623L22.4492 26.7227L18.5059 25.2627L17.4141 21.3643L21.5312 23.3623ZM13.6104 20.1602L14.8242 24.6006L10.8887 23.1387L9.49219 18.1553L13.6104 20.1602ZM5.2168 16.0654L6.72559 21.585L2.70703 19.9473L1.06055 13.8701L5.2168 16.0654Z" fill="url(#paint1_linear_error_modal)"/>
-              <defs>
-                <linearGradient id="paint0_linear_error_modal" x1="7.03362" y1="6.09543" x2="47.2003" y2="57.0656" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#F878D2"/>
-                  <stop offset="0.393522" stop-color="#FDCC81"/>
-                  <stop offset="1" stop-color="#F9A0D9"/>
-                </linearGradient>
-                <linearGradient id="paint1_linear_error_modal" x1="2.53739" y1="21.5136" x2="48.7969" y2="38.5742" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#F878D2"/>
-                  <stop offset="0.393522" stop-color="#FDCC81"/>
-                  <stop offset="1" stop-color="#F9A0D9"/>
-                </linearGradient>
-              </defs>
-            </svg>
-          `,
+                    innerHTML: abstraxnLogoSvgHtml({ size: 20, gradientId: "abstraxn_logo_web_error_modal" }),
                     style: "display: inline-flex; align-items: center;",
                 });
                 brandContainer.appendChild(logoSvg);
@@ -1763,7 +1938,7 @@ export class OnboardingUIWeb {
                 errorCard.appendChild(footer);
             }
             errorModalOverlay.appendChild(errorCard);
-            document.body.appendChild(errorModalOverlay);
+            this.shadowContainer?.appendChild(errorModalOverlay);
         }
         else {
             // Update message if overlay exists
@@ -1779,32 +1954,26 @@ export class OnboardingUIWeb {
      * Inject CSS styles into the document head (only once)
      */
     injectStyles() {
-        if (OnboardingUIWeb.stylesInjected) {
+        if (this.stylesInjected || !this.shadowContainer) {
             return;
         }
-        // Check if styles are already injected
-        const existingStyle = document.getElementById("onboarding-ui-styles");
+        // Defensive DOM-existence check (stylesInjected already guards this
+        // per-instance, but this is cheap and matches the idempotency pattern
+        // used elsewhere).
+        const existingStyle = this.shadowContainer.querySelector("#onboarding-ui-styles");
         if (existingStyle) {
-            OnboardingUIWeb.stylesInjected = true;
+            this.stylesInjected = true;
             return;
         }
         // Create and inject style element
         const styleElement = document.createElement("style");
         styleElement.id = "onboarding-ui-styles";
         styleElement.textContent = ONBOARDING_UI_STYLES;
-        document.head.appendChild(styleElement);
-        // Inject custom CSS if provided
-        if (this.config.customCSS) {
-            const customStyleElement = document.createElement("style");
-            customStyleElement.id = "onboarding-ui-custom-styles";
-            customStyleElement.textContent = this.config.customCSS;
-            document.head.appendChild(customStyleElement);
-        }
+        this.shadowContainer.appendChild(styleElement);
         // Apply custom colors if provided
         if (this.config.colors) {
             this.applyCustomColors();
         }
-        OnboardingUIWeb.stylesInjected = true;
         // Inject utility styles for loading/error modes
         const utilityStyle = document.createElement("style");
         utilityStyle.id = "onboarding-utility-styles";
@@ -1814,15 +1983,61 @@ export class OnboardingUIWeb {
         display: none !important;
       }
     `;
-        document.head.appendChild(utilityStyle);
+        this.shadowContainer.appendChild(utilityStyle);
+        // Custom CSS is injected strictly last, always — deliberate reorder from
+        // the pre-migration order (base styles -> customCSS -> colors -> utility)
+        // so customCSS always wins over both base styles and colors on
+        // equal-specificity rules. See docs/shadow-dom-migration-plan.md Section 9.
+        if (this.config.customCSS) {
+            const customStyleElement = document.createElement("style");
+            customStyleElement.id = "onboarding-ui-custom-styles";
+            customStyleElement.textContent = this.config.customCSS;
+            this.shadowContainer.appendChild(customStyleElement);
+        }
+        this.stylesInjected = true;
+    }
+    /**
+     * Build a divider element (line + "or" text) matching `.onboarding-divider`
+     */
+    createDividerElement() {
+        const divider = this.createElement("div", {
+            className: "onboarding-divider",
+        });
+        const dividerText = this.createElement("span", {
+            className: "onboarding-divider-text",
+            textContent: "or",
+        });
+        divider.appendChild(dividerText);
+        return divider;
+    }
+    /**
+     * Footer text/brand colors, derived from config.colors.text with theme-based fallbacks
+     */
+    getFooterTextColors() {
+        const textColor = this.config.colors?.text ||
+            (this.config.theme === "dark" ? "#9ca3af" : "#6b7280");
+        const brandColor = this.config.colors?.text ||
+            (this.config.theme === "dark" ? "#e5e7eb" : "#374151");
+        return { textColor, brandColor };
+    }
+    /**
+     * Passkey button colors, derived from config.colors with theme-based fallbacks
+     */
+    getPasskeyButtonColors() {
+        const passkeyBg = this.config.colors?.primary ||
+            (this.config.theme === "dark" ? "#4b5563" : "#ffffff");
+        const passkeyBorder = this.config.colors?.border ||
+            (this.config.theme === "dark" ? "#6b7280" : "#e5e7eb");
+        const passkeyTextColor = this.config.colors?.text ||
+            (this.config.theme === "dark" ? "#ffffff" : "#1f2937");
+        return { passkeyBg, passkeyBorder, passkeyTextColor };
     }
     /**
      * Apply custom colors from config
      */
     applyCustomColors() {
-        if (!this.config.colors)
+        if (!this.config.colors || !this.shadowContainer)
             return;
-        const root = this.rootElement || document.documentElement;
         const style = document.createElement("style");
         style.id = "onboarding-ui-colors";
         let css = "";
@@ -1847,15 +2062,16 @@ export class OnboardingUIWeb {
             css += `.onboarding-error { color: ${this.config.colors.error} !important; }`;
         }
         style.textContent = css;
-        document.head.appendChild(style);
+        this.shadowContainer.appendChild(style);
     }
     /**
      * Setup the container element
      */
     setupContainer() {
-        // For modal mode, always use body
+        // For modal mode, always use the shadow container (the boundary this
+        // instance owns), not document.body directly.
         if (this.config.modal) {
-            this.container = document.body;
+            this.container = this.shadowContainer;
         }
         else {
             if (this.config.container) {
@@ -1870,8 +2086,8 @@ export class OnboardingUIWeb {
                 }
             }
             else {
-                // Create a default container
-                this.container = document.body;
+                // Default container: the shadow container this instance owns.
+                this.container = this.shadowContainer;
             }
         }
     }
@@ -1908,6 +2124,7 @@ export class OnboardingUIWeb {
         // Create root element for the form
         this.rootElement = this.createElement("div", {
             className: `onboarding-container onboarding-theme-${this.config.theme} ${this.config.className}`,
+            part: "container",
             style: this.parseStyle(this.config.style),
         });
         // Build the form content
@@ -1938,10 +2155,11 @@ export class OnboardingUIWeb {
                 }
             });
         }
-        // Prevent body scroll when modal is open
+        // Prevent body scroll when modal is open (intentional real document.body
+        // side effect, not a style leak — the host page's own scroll state).
         document.body.style.overflow = "hidden";
-        // Append to body
-        document.body.appendChild(this.modalOverlay);
+        // Append inside this instance's own shadow container, not document.body.
+        this.shadowContainer?.appendChild(this.modalOverlay);
         // Add animation class
         setTimeout(() => {
             if (this.modalOverlay) {
@@ -1969,11 +2187,12 @@ export class OnboardingUIWeb {
         const focusableElements = this.modalContent.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
         const firstElement = focusableElements[0];
         const lastElement = focusableElements[focusableElements.length - 1];
-        if (e.shiftKey && document.activeElement === firstElement) {
+        const active = getDeepActiveElement();
+        if (e.shiftKey && active === firstElement) {
             e.preventDefault();
             lastElement.focus();
         }
-        else if (!e.shiftKey && document.activeElement === lastElement) {
+        else if (!e.shiftKey && active === lastElement) {
             e.preventDefault();
             firstElement.focus();
         }
@@ -1987,12 +2206,13 @@ export class OnboardingUIWeb {
         // Create root element
         this.rootElement = this.createElement("div", {
             className: `onboarding-container onboarding-inline onboarding-theme-${this.config.theme} ${this.config.className}`,
+            part: "container",
             style: this.parseStyle(this.config.style),
         });
         // Build the form content
         this.buildFormContent();
         // Append to container
-        if (this.container === document.body) {
+        if (this.container === this.shadowContainer) {
             this.container.appendChild(this.rootElement);
         }
         else {
@@ -2007,7 +2227,7 @@ export class OnboardingUIWeb {
         if (!this.rootElement)
             return;
         // Create card
-        const card = this.createElement("div", { className: "onboarding-card" });
+        const card = this.createElement("div", { className: "onboarding-card", part: "card" });
         // Header with logo at top
         const header = this.createElement("div", {
             className: "onboarding-header",
@@ -2079,6 +2299,7 @@ export class OnboardingUIWeb {
             id: "onboarding-email-input",
             placeholder: this.config.labels?.emailPlaceholder || "Enter your email",
             className: "onboarding-input",
+            part: "input",
             required: true,
             autocomplete: "email",
             "aria-label": this.config.labels?.emailLabel || "Email Address",
@@ -2139,6 +2360,7 @@ export class OnboardingUIWeb {
             id: "onboarding-otp-input",
             placeholder: this.config.labels?.otpPlaceholder || "Enter 6-digit code",
             className: "onboarding-input",
+            part: "input",
             required: false, // Don't require initially since it's hidden
             maxLength: 6,
             inputMode: "numeric",
@@ -2161,6 +2383,7 @@ export class OnboardingUIWeb {
         this.continueButton = this.createElement("button", {
             type: "submit",
             className: "onboarding-button onboarding-button-primary",
+            part: "button-primary",
             textContent: this.config.labels?.emailButton || "Continue",
             "aria-label": this.config.labels?.emailButton || "Continue with email",
             style: allAuthMethodsEnabled ? "display: none;" : "",
@@ -2180,14 +2403,7 @@ export class OnboardingUIWeb {
         }
         // Divider (show if email plus any social method is enabled)
         if (showEmail && socialMethods.length > 0) {
-            this.divider = this.createElement("div", {
-                className: "onboarding-divider",
-            });
-            const dividerText = this.createElement("span", {
-                className: "onboarding-divider-text",
-                textContent: "or",
-            });
-            this.divider.appendChild(dividerText);
+            this.divider = this.createDividerElement();
             card.appendChild(this.divider);
         }
         else {
@@ -2210,6 +2426,7 @@ export class OnboardingUIWeb {
                     className: isGoogle
                         ? "onboarding-button onboarding-button-google"
                         : "onboarding-button onboarding-button-social",
+                    part: isGoogle ? "button-google" : undefined,
                     "aria-label": this.config.labels?.[`${method}Button`] ||
                         (method === "google"
                             ? "Continue with Google"
@@ -2287,14 +2504,7 @@ export class OnboardingUIWeb {
         }
         // Passkey divider (only show if passkey is enabled and there are other auth methods)
         if (showPasskey && (showEmail || socialMethods.length > 0)) {
-            this.passkeyDivider = this.createElement("div", {
-                className: "onboarding-divider",
-            });
-            const passkeyDividerText = this.createElement("span", {
-                className: "onboarding-divider-text",
-                textContent: "or",
-            });
-            this.passkeyDivider.appendChild(passkeyDividerText);
+            this.passkeyDivider = this.createDividerElement();
             card.appendChild(this.passkeyDivider);
         }
         else {
@@ -2302,12 +2512,7 @@ export class OnboardingUIWeb {
         }
         // Passkey login button (only show if passkey auth is enabled)
         if (showPasskey) {
-            const passkeyBg = this.config.colors?.primary ||
-                (this.config.theme === "dark" ? "#4b5563" : "#ffffff");
-            const passkeyBorder = this.config.colors?.border ||
-                (this.config.theme === "dark" ? "#6b7280" : "#e5e7eb");
-            const passkeyTextColor = this.config.colors?.text ||
-                (this.config.theme === "dark" ? "#ffffff" : "#1f2937");
+            const { passkeyBg, passkeyBorder, passkeyTextColor } = this.getPasskeyButtonColors();
             this.passkeyLoginButton = this.createElement("button", {
                 type: "button",
                 className: "onboarding-button onboarding-button-passkey",
@@ -2366,15 +2571,10 @@ export class OnboardingUIWeb {
             card.appendChild(this.passkeyErrorElement);
         }
         // External wallet divider (shown immediately if external wallets are enabled)
-        this.externalWalletDivider = this.createElement("div", {
-            className: "onboarding-divider",
-            style: this.externalWalletsEnabled ? "" : "display: none;",
-        });
-        const externalWalletDividerText = this.createElement("span", {
-            className: "onboarding-divider-text",
-            textContent: "or",
-        });
-        this.externalWalletDivider.appendChild(externalWalletDividerText);
+        this.externalWalletDivider = this.createDividerElement();
+        this.externalWalletDivider.style.display = this.externalWalletsEnabled
+            ? ""
+            : "none";
         card.appendChild(this.externalWalletDivider);
         // External wallet container (shown immediately if external wallets are enabled)
         this.externalWalletContainer = this.createElement("div", {
@@ -2384,10 +2584,7 @@ export class OnboardingUIWeb {
         card.appendChild(this.externalWalletContainer);
         // Footer (inside card, so it appears on initial login screen)
         if (this.config.showFooter) {
-            const textColor = this.config.colors?.text ||
-                (this.config.theme === "dark" ? "#9ca3af" : "#6b7280");
-            const brandColor = this.config.colors?.text ||
-                (this.config.theme === "dark" ? "#e5e7eb" : "#374151");
+            const { textColor, brandColor } = this.getFooterTextColors();
             this.footer = this.createElement("div", {
                 className: "onboarding-footer",
             });
@@ -2411,24 +2608,7 @@ export class OnboardingUIWeb {
             });
             // Abstraxn logo SVG
             const logoSvg = this.createElement("span", {
-                innerHTML: `
-          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" style="width: 20px; height: 20px; display: inline-block; vertical-align: middle;">
-            <path d="M47.9082 37.191L23.9541 23.553L0 9.91504L37.7436 -8.13502e-06L47.9082 37.191Z" fill="url(#paint0_linear_1242_781)"/>
-            <path d="M13.5156 46.3594L10.1846 47.2344L8.99219 42.873L12.4365 42.4111L13.5156 46.3594ZM20.4268 44.5566L17.1152 45.4199L16.125 41.8818L19.5566 41.3721L20.4268 44.5566ZM26.9307 42.834L23.6152 43.6982L22.8438 40.9443L26.2744 40.4326L26.9307 42.834ZM33.5078 41.1074L30.1875 41.9727L29.6328 39.9951L33.0635 39.4844L33.5078 41.1074ZM39.998 39.4014L36.6729 40.2686L36.3359 39.0674L39.7656 38.5508L39.998 39.4014ZM10.1406 33.9434L11.6807 39.5762L8.15918 39.7568L6.46094 33.543L10.1406 33.9434ZM17.6582 34.5996L18.8916 39.1113L15.4199 39.3496L14.0078 34.3076L17.6582 34.5996ZM24.8779 35.332L25.8047 38.7227L22.3252 38.959L21.2266 35.0361L24.8779 35.332ZM32.0918 36.0723L32.7119 38.3398L29.2227 38.5723L28.4375 35.7656L32.0918 36.0723ZM43.2373 38.5488L43.1172 38.1172L47.7939 37.3516L43.2373 38.5488ZM39.3047 36.8096L39.6182 37.9561L36.1221 38.1846L35.6484 36.4961L39.3047 36.8096ZM47.7939 37.3516L43.0107 37.7939L42.8516 37.2236L47.7939 37.3516ZM47.8291 37.2988L42.7227 36.7529L42.5547 36.1523L47.8291 37.2988ZM47.8652 37.2412L42.3711 35.3486L42.2031 34.7471L47.8652 37.2412ZM38.748 34.8604L39.0664 36.0254L35.3369 35.4043L34.8594 33.6982L38.748 34.8604ZM31.0576 32.3994L31.6787 34.6709L27.959 34.0566L27.1719 31.2461L31.0576 32.3994ZM38.0811 32.6318L38.4092 33.8301L34.4893 32.3496L34.1543 31.1523C34.1005 30.9591 34.0322 30.7719 33.9531 30.5918L38.0811 32.6318ZM23.3682 29.9385L24.291 33.3164L20.5801 32.71L19.4844 28.7949L23.3682 29.9385ZM15.6641 27.4805L16.8896 31.9629L13.1875 31.3594L11.7812 26.3379L15.6641 27.4805ZM29.9463 28.4678L30.5693 30.748L26.6201 29.2812L25.8633 26.583C25.8534 26.5431 25.8417 26.5028 25.8281 26.4639L29.9463 28.4678ZM7.6875 25.0938L9.21484 30.6816L5.44727 29.959L3.75781 23.7793L7.6875 25.0938ZM21.5312 23.3623L22.4492 26.7227L18.5059 25.2627L17.4141 21.3643L21.5312 23.3623ZM13.6104 20.1602L14.8242 24.6006L10.8887 23.1387L9.49219 18.1553L13.6104 20.1602ZM5.2168 16.0654L6.72559 21.585L2.70703 19.9473L1.06055 13.8701L5.2168 16.0654Z" fill="url(#paint1_linear_1242_781)"/>
-            <defs>
-              <linearGradient id="paint0_linear_1242_781" x1="7.03362" y1="6.09543" x2="47.2003" y2="57.0656" gradientUnits="userSpaceOnUse">
-                <stop stop-color="#F878D2"/>
-                <stop offset="0.393522" stop-color="#FDCC81"/>
-                <stop offset="1" stop-color="#F9A0D9"/>
-              </linearGradient>
-              <linearGradient id="paint1_linear_1242_781" x1="2.53739" y1="21.5136" x2="48.7969" y2="38.5742" gradientUnits="userSpaceOnUse">
-                <stop stop-color="#F878D2"/>
-                <stop offset="0.393522" stop-color="#FDCC81"/>
-                <stop offset="1" stop-color="#F9A0D9"/>
-              </linearGradient>
-            </defs>
-          </svg>
-        `,
+                innerHTML: abstraxnLogoSvgHtml({ size: 20, gradientId: "abstraxn_logo_web_main" }),
                 style: "display: inline-flex; align-items: center;",
             });
             brandContainer.appendChild(logoSvg);
@@ -2835,6 +3015,7 @@ export class OnboardingUIWeb {
         this.verifyButton = this.createElement("button", {
             type: "button",
             className: "onboarding-button onboarding-button-primary",
+            part: "button-primary",
             textContent: "Verify",
         });
         this.verifyButton.disabled = true; // Start disabled; updateVerifyButtonDisabled() keeps it in sync
@@ -2867,10 +3048,7 @@ export class OnboardingUIWeb {
         }
         // Footer (add to OTP screen as well)
         if (this.config.showFooter) {
-            const textColor = this.config.colors?.text ||
-                (this.config.theme === "dark" ? "#9ca3af" : "#6b7280");
-            const brandColor = this.config.colors?.text ||
-                (this.config.theme === "dark" ? "#e5e7eb" : "#374151");
+            const { textColor, brandColor } = this.getFooterTextColors();
             const otpFooter = this.createElement("div", {
                 className: "onboarding-footer",
             });
@@ -2894,24 +3072,7 @@ export class OnboardingUIWeb {
             });
             // Abstraxn logo SVG
             const logoSvg = this.createElement("span", {
-                innerHTML: `
-          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" style="width: 20px; height: 20px; display: inline-block; vertical-align: middle;">
-            <path d="M47.9082 37.191L23.9541 23.553L0 9.91504L37.7436 -8.13502e-06L47.9082 37.191Z" fill="url(#paint0_linear_1242_781_otp)"/>
-            <path d="M13.5156 46.3594L10.1846 47.2344L8.99219 42.873L12.4365 42.4111L13.5156 46.3594ZM20.4268 44.5566L17.1152 45.4199L16.125 41.8818L19.5566 41.3721L20.4268 44.5566ZM26.9307 42.834L23.6152 43.6982L22.8438 40.9443L26.2744 40.4326L26.9307 42.834ZM33.5078 41.1074L30.1875 41.9727L29.6328 39.9951L33.0635 39.4844L33.5078 41.1074ZM39.998 39.4014L36.6729 40.2686L36.3359 39.0674L39.7656 38.5508L39.998 39.4014ZM10.1406 33.9434L11.6807 39.5762L8.15918 39.7568L6.46094 33.543L10.1406 33.9434ZM17.6582 34.5996L18.8916 39.1113L15.4199 39.3496L14.0078 34.3076L17.6582 34.5996ZM24.8779 35.332L25.8047 38.7227L22.3252 38.959L21.2266 35.0361L24.8779 35.332ZM32.0918 36.0723L32.7119 38.3398L29.2227 38.5723L28.4375 35.7656L32.0918 36.0723ZM43.2373 38.5488L43.1172 38.1172L47.7939 37.3516L43.2373 38.5488ZM39.3047 36.8096L39.6182 37.9561L36.1221 38.1846L35.6484 36.4961L39.3047 36.8096ZM47.7939 37.3516L43.0107 37.7939L42.8516 37.2236L47.7939 37.3516ZM47.8291 37.2988L42.7227 36.7529L42.5547 36.1523L47.8291 37.2988ZM47.8652 37.2412L42.3711 35.3486L42.2031 34.7471L47.8652 37.2412ZM38.748 34.8604L39.0664 36.0254L35.3369 35.4043L34.8594 33.6982L38.748 34.8604ZM31.0576 32.3994L31.6787 34.6709L27.959 34.0566L27.1719 31.2461L31.0576 32.3994ZM38.0811 32.6318L38.4092 33.8301L34.4893 32.3496L34.1543 31.1523C34.1005 30.9591 34.0322 30.7719 33.9531 30.5918L38.0811 32.6318ZM23.3682 29.9385L24.291 33.3164L20.5801 32.71L19.4844 28.7949L23.3682 29.9385ZM15.6641 27.4805L16.8896 31.9629L13.1875 31.3594L11.7812 26.3379L15.6641 27.4805ZM29.9463 28.4678L30.5693 30.748L26.6201 29.2812L25.8633 26.583C25.8534 26.5431 25.8417 26.5028 25.8281 26.4639L29.9463 28.4678ZM7.6875 25.0938L9.21484 30.6816L5.44727 29.959L3.75781 23.7793L7.6875 25.0938ZM21.5312 23.3623L22.4492 26.7227L18.5059 25.2627L17.4141 21.3643L21.5312 23.3623ZM13.6104 20.1602L14.8242 24.6006L10.8887 23.1387L9.49219 18.1553L13.6104 20.1602ZM5.2168 16.0654L6.72559 21.585L2.70703 19.9473L1.06055 13.8701L5.2168 16.0654Z" fill="url(#paint1_linear_1242_781_otp)"/>
-            <defs>
-              <linearGradient id="paint0_linear_1242_781_otp" x1="7.03362" y1="6.09543" x2="47.2003" y2="57.0656" gradientUnits="userSpaceOnUse">
-                <stop stop-color="#F878D2"/>
-                <stop offset="0.393522" stop-color="#FDCC81"/>
-                <stop offset="1" stop-color="#F9A0D9"/>
-              </linearGradient>
-              <linearGradient id="paint1_linear_1242_781_otp" x1="2.53739" y1="21.5136" x2="48.7969" y2="38.5742" gradientUnits="userSpaceOnUse">
-                <stop stop-color="#F878D2"/>
-                <stop offset="0.393522" stop-color="#FDCC81"/>
-                <stop offset="1" stop-color="#F9A0D9"/>
-              </linearGradient>
-            </defs>
-          </svg>
-        `,
+                innerHTML: abstraxnLogoSvgHtml({ size: 20, gradientId: "abstraxn_logo_web_otp" }),
                 style: "display: inline-flex; align-items: center;",
             });
             brandContainer.appendChild(logoSvg);
@@ -3404,6 +3565,7 @@ export class OnboardingUIWeb {
         this.mfaVerifyButton = this.createElement("button", {
             type: "button",
             className: "onboarding-button onboarding-button-primary",
+            part: "button-primary",
             textContent: "Verify",
         });
         this.mfaVerifyButton.disabled = true;
@@ -4056,6 +4218,12 @@ export class OnboardingUIWeb {
      * Destroy the component
      */
     destroy() {
+        // Cancel any delayed OAuth loader so it cannot paint into a torn-down shadow root
+        // (or call ensureLiveShadow and orphan a new host after StrictMode cleanup).
+        if (this.pendingLoadingModalTimer !== null) {
+            clearTimeout(this.pendingLoadingModalTimer);
+            this.pendingLoadingModalTimer = null;
+        }
         // Reset to login form before destroying to ensure clean state
         this.resetToLoginForm();
         // Clean up modal
@@ -4086,6 +4254,26 @@ export class OnboardingUIWeb {
         this.mfaUseBackupCode = false;
         this.externalWalletContainer = null; // Clear external wallet container reference
         this.externalWalletDivider = null; // Clear external wallet divider reference
+        // Remove this instance's own shadow host from document.body and
+        // unregister it from shadowRegistry — entirely self-contained to this
+        // instance, does not affect any other coexisting OnboardingUIWeb instance
+        // (see docs/shadow-dom-migration-plan.md — this was a page-wide singleton
+        // in an earlier draft of the design, corrected to per-instance).
+        this.shadowTeardown?.();
+        this.shadowTeardown = null;
+        this.shadowContainer = null;
+        // MUST reset alongside shadowContainer: a later re-init() creates a
+        // BRAND NEW shadow container with zero styles injected into it yet. If
+        // this stayed true, injectStyles()'s first-line guard
+        // (`if (this.stylesInjected || ...) return;`) would short-circuit before
+        // ever reaching its own DOM-existence check, permanently skipping style
+        // injection for the new container — the modal would render with only
+        // its inline `display` style and none of its own CSS (no position:fixed,
+        // no z-index), landing in normal document flow instead of as an overlay.
+        // This exact sequence happens every time under React 18 StrictMode's
+        // dev-mode mount->cleanup->mount cycle: destroy() runs once via the
+        // simulated cleanup, then a real re-init happens lazily on first click.
+        this.stylesInjected = false;
     }
     /**
      * Create DOM element helper