feat(js,react): inbox and styles under the shadow root #8262

LetItRock · 2025-05-07T15:02:04Z

What changed? Why was the change needed?

Inbox
The new containerElement prop allows specifying the "container" that will be used to render Bell, Inbox and Popover, and its internal styles. The containerElement prop takes a Node which can be an HTMLElement or ShadowRoot, or a CSS selector.

Example of usage:

<Inbox
  {...config}
  containerElement={document.getElementById("inbox-root")?.shadowRoot}
/>

Screenshots

Screen.Recording.2025-05-07.at.13.57.40.mov

Screen.Recording.2025-05-07.at.13.56.18.mov

linear · 2025-05-07T15:02:08Z

NV-5817 Resolve styling issues with shadow root in mfe-based architecture

netlify · 2025-05-07T15:02:10Z

✅ Deploy Preview for dashboard-v2-novu-staging canceled.

Name	Link
🔨 Latest commit	`b4dde02`
🔍 Latest deploy log	https://app.netlify.com/projects/dashboard-v2-novu-staging/deploys/6826f52b4418c30008a8cc35

LetItRock · 2025-05-07T15:03:05Z

packages/js/src/ui/components/Notification/DefaultNotification.tsx

@@ -129,7 +129,7 @@ export const DefaultNotification = (props: DefaultNotificationProps) => {
                {(subject) => (
                  <Markdown
                    appearanceKey="notificationSubject"
-                    class="nt-text-start nt-font-medium"
+                    class="nt-text-start nt-font-medium nt-whitespace-pre-wrap [word-break:break-word]"


fix for long text breaking UI:

LetItRock · 2025-05-07T15:05:22Z

packages/js/src/ui/components/Renderer.tsx

@@ -67,33 +68,40 @@ type RendererProps = {
  preferencesFilter?: PreferencesFilter;
  routerPush?: RouterPush;
  novu?: Novu;
+  containerElement?: Node | null | undefined;


the new prop that defines where the Inbox and its styles will be embedded; the name TBD;

LetItRock · 2025-05-07T15:06:47Z

packages/js/src/ui/components/Renderer.tsx

-    const id = 'novu-default-css';
-    const el = document.getElementById(id);
+    const id = NOVU_DEFAULT_CSS_ID;
+    const root = props.containerElement instanceof ShadowRoot ? props.containerElement : document;


if the containerElement is a shadow root, then use it to find the default styles

LetItRock · 2025-05-07T15:07:21Z

packages/js/src/ui/components/Renderer.tsx

+    const stylesContainer = props.containerElement ?? document.head;
+    stylesContainer.insertBefore(styleEl, stylesContainer.firstChild);


inject the default styles to the containerElement if provided otherwise document head

LetItRock · 2025-05-07T15:10:23Z

packages/js/src/ui/components/primitives/Popover/PopoverContent.tsx

+    if (
+      active() !== floating() ||
+      floating()?.contains(e.target as Node) ||
+      (container && (e.target as Element).shadowRoot === container)


if the target shadow root is the container where the inbox is embedded, then do not close it;

LetItRock · 2025-05-07T15:15:42Z

packages/js/src/ui/components/primitives/Tabs/useKeyboardNavigation.ts

+  const getRoot = () => {
+    const container = containerElement();
+
+    return container instanceof ShadowRoot ? container : document;
+  };


handle tab and keyboard navigation on components, for example tabs

LetItRock · 2025-05-07T15:16:23Z

packages/js/src/ui/components/primitives/Tooltip/TooltipContent.tsx


  return (
    <Show when={open()}>
      {/* we can safely use portal to document.body here as this element 
      won't be focused and close other portals (outside solid world) as a result */}
-      <Portal>
+      <Portal mount={portalContainer()}>


mount tooltips inside the "container" not body

LetItRock · 2025-05-07T15:17:08Z

packages/js/src/ui/components/primitives/Tooltip/TooltipRoot.tsx

@@ -28,7 +28,7 @@ export function TooltipRoot(props: TooltipRootProps) {

  const position = useFloating(reference, floating, {
    placement: props.placement || 'top',
-    strategy: 'absolute',
+    strategy: 'fixed',


the absolute strategy doesn't work well for the tooltips, that's why changed to fixed

LetItRock · 2025-05-07T15:20:46Z

packages/js/src/ui/context/AppearanceContext.tsx

+    const defaultCssStyles = root.getElementById(NOVU_DEFAULT_CSS_ID);
+    if (defaultCssStyles) {
+      stylesContainer.insertBefore(styleEl, defaultCssStyles.nextSibling);
+    } else {
+      stylesContainer.appendChild(styleEl);
+    }


default styles and appearance styles should come together one after another

LetItRock · 2025-05-07T15:21:29Z

packages/js/src/ui/novuUI.tsx

+    if (typeof containerElement === 'string') {
+      return document.querySelector(containerElement) ?? document.getElementById(containerElement);
+    }


if the containerElement is CSS selector then try to find elements

scopsy · 2025-05-12T06:46:27Z

packages/react/src/utils/types.ts

@@ -38,6 +38,7 @@ export type BaseProps = {
  localization?: Localization;
  tabs?: Array<Tab>;
  preferencesFilter?: PreferencesFilter;
+  containerElement?: Node | null;


@LetItRock what do you think about: container similar to Radix terminology?

@scopsy yes, Emotion is using similar name as well ;)

Cool! Than let's go with it?

pkg-pr-new · 2025-05-15T15:24:18Z

Open in StackBlitz

@novu/js

npm i https://pkg.pr.new/novuhq/novu/@novu/js@8262

@novu/nextjs

npm i https://pkg.pr.new/novuhq/novu/@novu/nextjs@8262

novu

npm i https://pkg.pr.new/novuhq/novu@8262

@novu/react

npm i https://pkg.pr.new/novuhq/novu/@novu/react@8262

@novu/react-native

npm i https://pkg.pr.new/novuhq/novu/@novu/react-native@8262

commit: b4dde02

feat(js,react): inbox and styles under the shadow root

ccb6269

LetItRock requested review from SokratisVidros, scopsy, ChmaraX, djabarovgeorge and desiprisg May 7, 2025 15:02

LetItRock self-assigned this May 7, 2025

LetItRock temporarily deployed to Linting May 7, 2025 15:02 — with GitHub Actions Inactive

LetItRock commented May 7, 2025

View reviewed changes

scopsy approved these changes May 12, 2025

View reviewed changes

Merge branch 'next' into nv-5817-inbox-shadow-root-as-container

730ab43

LetItRock temporarily deployed to Linting May 15, 2025 15:20 — with GitHub Actions Inactive

github-actions bot added the @novu/dashboard label May 15, 2025

feat(js,react): automatic shadow root detection

2f1b935

LetItRock temporarily deployed to Linting May 15, 2025 17:20 — with GitHub Actions Inactive

scopsy approved these changes May 15, 2025

View reviewed changes

chore(js,react): rename container prop

b4dde02

LetItRock temporarily deployed to Linting May 16, 2025 08:19 — with GitHub Actions Inactive

LetItRock merged commit 92d1001 into next May 16, 2025
28 checks passed

LetItRock deleted the nv-5817-inbox-shadow-root-as-container branch May 16, 2025 09:10

		const stylesContainer = props.containerElement ?? document.head;
		stylesContainer.insertBefore(styleEl, stylesContainer.firstChild);

feat(js,react): inbox and styles under the shadow root #8262

feat(js,react): inbox and styles under the shadow root #8262

Uh oh!

Conversation

LetItRock commented May 7, 2025

What changed? Why was the change needed?

Screenshots

Uh oh!

linear bot commented May 7, 2025

Uh oh!

netlify bot commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for dashboard-v2-novu-staging canceled.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new bot commented May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

netlify bot commented May 7, 2025 •

edited

Loading

pkg-pr-new bot commented May 15, 2025 •

edited

Loading