preact · Preact Docs
Preact Web Components
Explains how to integrate and use framework-agnostic Web Components within a Preact application, including rendering custom tags, handling property vs attribute synchronization, and interacting with custom element lif...
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Preact Web Components
Explains how to integrate and use framework-agnostic Web Components within a Preact application, including rendering custom tags, handling property vs attribute synchronization, and interacting with custom element lif...
When To Use
Use when you need to render custom HTML elements in Preact or ensure that complex data is passed to Web Components via properties rather than attributes.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-web-components-workflow-guide.md | A comprehensive guide covering the essentials, debugging, testing, and advanced usage of Preact Web Components. | Questions about a comprehensive guide covering the essentials, debugging, testing, and advanced usage of Preact Web Components. |
examples/preact-web-components-custom-element-definition.text | A code example demonstrating how to register a Preact component as a custom element using the customElements.define API. | Exact payloads, commands, or snippets shown in A code example demonstrating how to register a Preact component as a custom element using the customElements.define API. |
examples/preact-web-components-custom-elements-definition.text | A code example demonstrating how to define a custom element using the customElements.define API within a Preact application. | Exact payloads, commands, or snippets shown in A code example demonstrating how to define a custom element using the customElements.define API within a Preact appli... |
examples/preact-web-components-ref-usage.text | A code example demonstrating how to use useRef and useEffect to interact with a Web Component element within a Preact component. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use useRef and useEffect to interact with a Web Component element within a Preact... |
examples/preact-web-components-dom-event-handling-examples.text | Code examples demonstrating how to handle built-in DOM events and custom element events within Preact web components. | Exact payloads, commands, or snippets shown in Code examples demonstrating how to handle built-in DOM events and custom element events within Preact web components. |
What This Skill Covers
- Guide Version: 11.x (preview) 10.x (current) 8.x
- Main sections:
Introduction,Essentials,Debug & Test,Advanced,Libraries.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://preactjs.com/guide/v10/web-components