Clipcopy#
Component <neo-clipcopy> is a wrapper that copies a value to the clipboard when its first child is clicked. The host toggles a copied attribute so consumers style idle and copied states from CSS.
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.
Reference#
| Name | Type | Default | Description |
|---|---|---|---|
value | string | none | Literal text to copy. Takes precedence over for. |
for | string | none | Id of an element whose textContent is copied. |
copied-duration | number | 1500 | Milliseconds the copied attribute stays on the host. |
| Name | Description |
|---|---|
| default | Trigger element. Children may use [data-neo-clipcopy-idle] and [data-neo-clipcopy-copied] to swap label content per state. |
| Name | Detail | Bubbles | Description |
|---|---|---|---|
neo-clipcopy-copy | { value: string } | yes | Fires after a successful copy. |
neo-clipcopy-error | { error: Error } | yes | Fires when the clipboard write fails. |
Examples#
Icon + target ref#
The host reads the textContent of the <code> element pointed to by its for attribute, so the copied value tracks what the user sees on the page. Useful when the rendered text is the source of truth.
sk_live_AbC123DefGhI456JkL789MnO