Prompt Buddy logoPrompt Buddy

preact · Preact Docs

Preact Root Fragment

Explains how to use the preact-root-fragment library to implement partial hydration by rendering or hydrating specific sub-elements within a parent DOM node instead of replacing the entire node.

Import to Prompt Buddy

Derived skill

Files assembled from official documentation

Viewing SKILL.md

preact-root-fragment

Explains how to use the preact-root-fragment library to implement partial hydration by rendering or hydrating specific sub-elements within a parent DOM node instead of replacing the entire node.

When To Use

Use when you need to perform partial hydration or render multiple distinct Preact trees into a single parent DOM element without overwriting sibling nodes.

Reference Files

FileContainsUse For
SKILL.mdEntry point: scope, routing table, and workflow.Start here.
docs/preact-root-fragment-workflow-guide.mdA guide explaining the usage, essentials, debugging, and advanced implementation of the preact-root-fragment feature.Questions about a guide explaining the usage, essentials, debugging, and advanced implementation of the preact-root-fragment feature.
examples/preact-root-fragment-render-body.textA code example demonstrating how to use a fragment as the root element in the preact render function to replace the body tag.Exact payloads, commands, or snippets shown in A code example demonstrating how to use a fragment as the root element in the preact render function to replace the b...
examples/preact-root-fragment-usage.textA text representation of the preact-root-fragment guide demonstrating how to render multiple top-level elements using a fragment.Exact payloads, commands, or snippets shown in A text representation of the preact-root-fragment guide demonstrating how to render multiple top-level elements using...
examples/preact-root-fragment-render-target-examples.textCode examples demonstrating how to use preact-root-fragment to render components into specific DOM sub-elements within a container.Exact payloads, commands, or snippets shown in Code examples demonstrating how to use preact-root-fragment to render components into specific DOM sub-elements withi...
examples/preact-root-fragment-api-signature.textThe function signature and parameter definitions for the createRootFragment method in Preact.Exact payloads, commands, or snippets shown in The function signature and parameter definitions for the createRootFragment method in Preact.
examples/preact-root-fragment-create-root-fragment-usage.textA code example demonstrating how to use the createRootFragment function to render multiple top-level elements in Preact.Exact payloads, commands, or snippets shown in A code example demonstrating how to use the createRootFragment function to render multiple top-level elements in Preact.
examples/preact-root-fragment-usage-2.textA code example demonstrating how to use createRootFragment to render specific child elements from the document body in Preact.Exact payloads, commands, or snippets shown in A code example demonstrating how to use createRootFragment to render specific child elements from the document body i...

What This Skill Covers

  • Guide Version: 11.x (preview) 10.x (current) 8.x
  • Main sections: Introduction, Essentials, Debug & Test, Advanced, Libraries.

Workflow

  1. Open the most relevant file under docs/ for the exact documented workflow and wording.
  2. Open schemas/ files for exact structured contracts.
  3. Open examples/ files for concrete requests, commands, snippets, and manifests.
  4. Do not add behavior or configuration that is not present in the attached source files.

Canonical source: https://preactjs.com/guide/v10/preact-root-fragment