Merges its props onto its immediate child.
<Slot.slot as="button" class="DemoButton violet" type="button">
Composed Button
</Slot.slot>
•
Can be used to support your own polymorphic component API.
Anatomy
Import the component.
<Slot.slot>
…
</Slot.slot>
Anatomy
-
Slot - Renders a chosen HTML tag with merged attributes.
API Reference
Slot
Renders the element specified by as with merged attributes and content.
| Prop | Type | Default | Description |
|---|---|---|---|
as
|
string
|
"div"
|
|
class
|
string
|
nil
|
|
style
|
string
|
nil
|
as
Type
string
Default
"div"
class
Type
string
Default
nil
style
Type
string
Default
nil
Basic example
Use to create polymorphic components that can render as different HTML elements.
When your component should render as a specific tag, pass as and any shared attributes:
<Slot.slot as="button" class="DemoButton violet" type="button">
Click me
</Slot.slot>
Use additional HTML attributes through global assigns (for example type, href, or phx-click):
<Slot.slot as="a" class="DemoButton violet" href="/contact">
Contact
</Slot.slot>
See the Composition guide for how Slot fits into Essence UI patterns.