{
  "id": "2ea9f082ecd8103b137577c6",
  "source": "solid:solid-router",
  "type": "github-document",
  "title": "portal",
  "content": "---\ntitle: \u003cPortal\u003e\nuse_cases: 'modals, tooltips, overlays, popups, dropdowns, ui layers, escape dom hierarchy'\ntags:\n  - portal\n  - modals\n  - dom\n  - overlays\n  - tooltips\n  - components\nversion: '1.0'\ndescription: \u003e-\n  Render SolidJS components outside parent DOM hierarchy with Portal. Perfect\n  for modals, tooltips, and overlays that need to escape layout.\n---\n\n`\u003cPortal\u003e` is a component that allows you to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n\nThis is useful when your UI has some elements that need to appear on top of everything else, such as modals and tooltips.\n\n```tsx\nimport { Portal } from \"solid-js/web\"\nimport type { JSX } from \"solid-js\"\n\nfunction Portal(props: {\n\tmount?: Node\n\tuseShadow?: boolean\n\tisSVG?: boolean\n\tchildren: JSX.Element\n}): Text\n```\n\nThis inserts the element in the mount node.\nUseful for inserting Modals outside of the page layout.\nEvents still propagate through the component hierarchy, however `\u003cPortal\u003e` will only run on the client and has hydration _disabled_.\n\nThe portal is mounted in a `\u003cdiv\u003e` unless the target is the document head.\n`useShadow` places the element in a Shadow Root for style isolation, and `isSVG` is required if inserting into an SVG element so that the `\u003cdiv\u003e` is not inserted.\n\n```tsx\n\u003cPortal mount={document.getElementById(\"modal\")}\u003e\n\t\u003cdiv\u003eMy Content\u003c/div\u003e\n\u003c/Portal\u003e\n```\n\n## Props\n\n| Name        | Type      | Default       | Description                                       |\n| :---------- | :-------- | :------------ | :------------------------------------------------ |\n| `mount`     | `Node`    | document.body | The DOM node to mount the portal in.              |\n| `useShadow` | `boolean` | false         | Whether to use a Shadow Root for style isolation. |\n| `isSVG`     | `boolean` | false         | Whether the mount node is an SVG element.         |",
  "url": "file:///tmp/devour-github-216944658/src/routes/reference/components/portal.mdx",
  "metadata": {
    "path": "/tmp/devour-github-216944658/src/routes/reference/components/portal.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 1889,
    "source_type": "github"
  },
  "hash": "b9b23105ece4b52c7ccdcadb3088971f2259eec3901757f5bbdb99cab9d4ddf9",
  "timestamp": "2026-02-23T11:39:22.439362868+01:00"
}