@mobielnl/elements 0.3.1 → 0.5.0

package/README.md

@@ -14,7 +14,7 @@ Only Websend developers can currently contribute. See [Contributing Guide](https
 
 ### For React projects
 
-You will need Node.js 18+ and React 18+.
+You will need Node.js 18+ and React 19+.
 
 #### Install with your preferred package manager (pnpm, npm, yarn, bun, etc.)
 
@@ -45,6 +45,35 @@ All CSS styling is scoped to this `<ElementsRoot>` wrapper, which is essentially
 
 Components nested within this wrapper will inherit the styling. This is done so that it does not overwrite other CSS styling.
 
+#### Shadow DOM (optional)
+
+
+You can opt in for a Shadow DOM to isolate the CSS from your application's global styles.
+
+It is possible to inject a CSS string or CSS path url into the Shadow DOM. The `withShadowDOM` prop accepts:
+- `true` - Enables Shadow DOM without injecting CSS (for advanced use-cases)
+- `{ cssUrl: string }` - Enables Shadow DOM and injects a stylesheet from the provided URL
+- `{ css: string }` - Enables Shadow DOM and injects CSS from a string
+
+**Important**: When using Shadow DOM, you must provide a CSS URL or string that points to the Elements CSS so styles render inside the shadow root.
+
+```css
+/* File: elements.css */
+@import "@mobielnl/elements/style.css";
+```
+
+```tsx
+import { ElementsRoot, ProductResults } from "@mobielnl/elements";
+
+export default function Example() {
+  return (
+    <ElementsRoot withShadowDOM={{ cssUrl: "/elements.css" }}>
+      <ProductResults />
+    </ElementsRoot>
+  );
+}
+```
+
 #### Custom Styling with Tailwind CSS
 
 You can customize component styling using the `classNames` prop.