Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
highlight-wc
Medium-style text highlighting and annotation component with color swatches, private notes, and localStorage persistence.
Overview
The <highlight-wc> component enables Medium-style text selection highlighting on any content. Users can select text, choose a highlight color, add private notes, and all annotations persist in localStorage.
It wraps the data-highlights attribute system in a convenient web component interface.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
for |
string | — | ID of an external element to annotate. When set, the component is invisible and targets the referenced element. |
colors |
comma-separated | yellow,green,blue,pink |
Available highlight colors |
readonly |
boolean | — | Render stored highlights but disable creating new ones |
storage-key |
string | pathname | Custom localStorage key suffix |
Demo
Select any text in the article below to highlight it. Choose a color from the toolbar, add a private note, or click an existing highlight to modify it.
Wrapping Content
Wrap any content to enable highlighting on the first child element.
Wrap content
<highlight-wc> <article> <h2>My Article</h2> <p>Select any text to highlight it. Your highlights are saved automatically.</p> </article></highlight-wc>Targeting by ID
Use for to annotate an element elsewhere on the page. The component itself renders as invisible.
Target external element
<highlight-wc for="my-article" colors="yellow,pink"></highlight-wc> <article id="my-article"> <p>This article can be highlighted with yellow and pink.</p></article>Custom Colors
Custom palette
<highlight-wc colors="yellow,blue"> <article> <p>Only yellow and blue swatches available.</p> </article></highlight-wc>Define color values with CSS custom properties on :root:
Color tokens
:root { --highlight-yellow: #fef08a; --highlight-blue: #bfdbfe;}JavaScript API
The component exposes methods that delegate to the internal HighlightController:
Component API
const hw = document.querySelector('highlight-wc'); // Get all highlightshw.getHighlights(); // Remove onehw.removeHighlight('hn-abc123'); // Clear allhw.clearAll(); // Export/importconst json = hw.exportHighlights();hw.importHighlights(json);Accessibility
- Toolbar uses
role="toolbar"with arrow-key navigation - Screen reader announcements for highlight add/remove actions
- Escape closes toolbar, Ctrl+Enter saves notes
- Note panel uses
role="dialog"
Related
- data-highlights — Underlying attribute-based API
- text-reader — Text-to-speech with word highlighting
- review-surface — Pin-based design annotation
- mark — Native highlight element