Watermark
A container-level watermark layer that sits on top of the content without intercepting any interaction, suitable for preventing sensitive information from leaking.
Text Watermark
Basic text watermark
The text watermark is tiled; any content inside the container can be passed in as the slot
text generates a diagonally tiled unit; with repeat the unit is tiled, otherwise a single unit is centered.
Single Unit and Opacity
Single centered + opacity
opacity controls the transparency of the watermark layer (0–1, automatically clamped to bounds).
Image Watermark
Image watermark
The `image` attribute takes an image URL; when both text and image are present, image wins
No Interaction Interception
Normal content interaction
The watermark layer has `pointer-events: none`, so interactions with buttons / inputs above are completely unaffected.
Empty Container
Watermark shown without content
When the container has no slot content at all, the watermark layer still renders.
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
image | Image watermark URL (takes precedence over text when present) | string | — |
opacity | Watermark layer transparency (0–1, auto-clamped) | string | 0.15 |
repeat | Boolean; when present the unit is tiled, otherwise a single unit is centered | boolean | — |
text | Text watermark content (either text or image) | string | — |
Slots
| Name | Description |
|---|---|
| default | — |
The watermark is a decorative layer (aria-hidden + pointer-events: none): it is excluded from the accessibility tree and does not intercept interaction.