preact · Preact Docs
Preact Custom Element
Teaches how to wrap Preact components into standard Web Components using the preact-custom-element library, including registering tag names, defining observed attributes, and configuring shadow DOM usage.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
preact-custom-element
Teaches how to wrap Preact components into standard Web Components using the preact-custom-element library, including registering tag names, defining observed attributes, and configuring shadow DOM usage.
When To Use
Use when you need to wrap Preact components as standard Web Components to enable reuse across different frameworks or vanilla HTML environments.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-custom-element-workflow-guide.md | A comprehensive guide covering the essentials, debugging, testing, and advanced usage of the preact-custom-element library. | Questions about a comprehensive guide covering the essentials, debugging, testing, and advanced usage of the preact-custom-element li... |
examples/preact-custom-element-registration.text | A code example demonstrating how to use the preact-custom-element library to register a Preact component as a Web Component with specific attributes and shadow DOM settings. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the preact-custom-element library to register a Preact component as a Web Com... |
examples/preact-custom-element-usage.text | A text example demonstrating the syntax for using a Preact custom element within HTML. | Exact payloads, commands, or snippets shown in A text example demonstrating the syntax for using a Preact custom element within HTML. |
examples/preact-custom-element-html-template.text | A plain text representation of the HTML structure used to demonstrate a Preact custom element. | Exact payloads, commands, or snippets shown in A plain text representation of the HTML structure used to demonstrate a Preact custom element. |
examples/preact-custom-element-attribute-change-listener.text | A JavaScript example demonstrating how to register a custom element and listen for attribute changes using the preact-custom-element API. | Exact payloads, commands, or snippets shown in A JavaScript example demonstrating how to register a custom element and listen for attribute changes using the preact... |
examples/preact-custom-element-component-registration.text | A JavaScript code example demonstrating how to define a class component and register it as a custom element using the preact-custom-element library. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to define a class component and register it as a custom element using the... |
examples/preact-custom-element-prop-types-registration.text | A code example demonstrating how to define a Preact component with PropTypes and register it as a custom element. | Exact payloads, commands, or snippets shown in A code example demonstrating how to define a Preact component with PropTypes and register it as a custom element. |
examples/preact-custom-element-register-component.text | A code example demonstrating how to use the register function to wrap a Preact component as a custom element with shadow DOM enabled. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the register function to wrap a Preact component as a custom element with sha... |
examples/preact-custom-element-usage-2.text | A text representation of the preact-custom-element guide content demonstrating how to wrap Preact components as Web Components. | Exact payloads, commands, or snippets shown in A text representation of the preact-custom-element guide content demonstrating how to wrap Preact components as Web C... |
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/preact-custom-element