Log

A monospace log display container that supports incremental appending and "stick-to-bottom" auto-scrolling, suitable for consoles / build output scenarios.

Basic Usage

Basic log stream

Example

Provide data via the lines property (or the lines attribute as a JSON string); when appending, only the new lines are rendered incrementally — existing nodes are not rebuilt.

Line Numbers

Show line numbers

Example

Appending and Auto-Scroll

Appending log stream (stick-to-bottom auto-scroll)

Appends a log line every 1.2s; auto-scroll happens only when pinned to the bottom, and scrolling up to read history does not interrupt it.

Example

Disabling Auto-Scroll

auto-scroll=false

With auto-scroll="false", appended content does not auto-scroll to the bottom.

Example

Empty State

Empty log

An empty lines shows the empty-state placeholder; the copy follows the locale (overridable via empty-text).

Example

Custom empty text

empty-text overrides the default empty-state copy (default: "No logs").

Example

Loading History on Scroll-Up

require-more pagination

Scrolling to the top fires oas-require-more (detail { from: 'top' }); after a simulated delay, 10 older lines are prepended (key-aligned reconcile — existing rows are not rebuilt), line numbers re-flow and the reading position is preserved.

Example

Line Highlight

Keyword / regex highlight

The highlight JSON array: strings are literal keywords, pattern entries are regexes (escape backslashes as JSON, e.g. \\d); matches are wrapped in a mark span (token semantic background) and all text goes through textContent to prevent injection.

Example

Search Filter

Keyword search filter

A non-empty keyword shows only matching lines (case-insensitive), with matched fragments wrapped in a mark highlight (same visual system as the highlight channel); line numbers still show the original indices. The component fires oas-search (detail { keyword, matched, total }) so the host can display a match count. Clearing the input restores all lines; the host's lines data is never modified.

Example

Level Colors

levels semantic colors

The levels JSON array aligns with lines by index: info / success / warning / error map to token semantic colors (dark-theme aware), with aliases like warn / fatal; unknown levels are not colored.

Example

Loading and scrollTo

loading + scrollTo()

Fetch againBack to topBack to bottom

The loading attribute shows an overlay and syncs aria-busy; the scrollTo('top' | 'bottom' | px) method lets external buttons jump around.

Example

Font Size

Font size follows the outer context (inherited) by default; override with the CSS variable --oas-log-font (e.g. 18px).

Events and Methods

• oas-require-more: fired when scrolling into the top/bottom threshold zone (detail { from: 'top' | 'bottom' }). Edge-triggered — no repeated firing while staying in the zone, reset after leaving; thresholds controlled by offset-top / offset-bottom (px).
• oas-search: search filter report (detail { keyword, matched, total }) — fired when the keyword or the data changes (deduped for identical state); matched is the current number of matching lines and total the total lines; the filter window is the currently loaded lines (compatible with paginated loading).
• scrollTo('top' | 'bottom' | number): scrolls the viewport to top / bottom / a pixel offset, for external "back to bottom" buttons.
• loading: overlay mask on the viewport, syncs aria-busy; copy follows the locale (loading.loading).
• levels / highlight / keyword: per-line level semantic colors / keyword·regex highlight / search filter channels (JSON attributes, see demos above). A non-empty keyword shows only matching lines (case-insensitive) and highlights matched fragments with a mark span; filtering never modifies the host's lines, line numbers and levels stay aligned to the original indices, and clearing restores everything.

When history lines are prepended, the reconcile aligns rows by content key: existing row nodes are reused, line numbers re-flow, and the viewport reading position is compensated automatically.

API

oas-log

Attributes

Attribute	Description	Type	Default
auto-scroll	Auto-scroll to bottom on append (only when stuck to the bottom)	string	true
empty-text	Empty state text (overrides the locale default)	—	—
highlight	Line highlight rules (JSON array): string = literal keyword; { text } / { pattern, flags } = regex; matches are wrapped with a mark background (warning token)	string	—
keyword	Search filter keyword: when non-empty, only matching lines are shown (case-insensitive) and matched fragments get a mark highlight (same visual system as highlight); line numbers / levels stay aligned to the original indices, clearing restores all lines without modifying the host's lines	string	—
levels	Line levels (JSON array, index-aligned with lines): info/success/warning/error (aliases like warn/fatal normalized), mapped to semantic color tokens	string	—
line-number	Show the left line number column	boolean	—
lines	Log lines JSON string (attribute channel)	string[]	[]
loading	Loading state (viewport overlay + spinner + aria-busy)	boolean	—
offset-bottom	Distance from the bottom that counts as reaching it (px, fires oas-require-more with from=bottom, default 0)	—	—
offset-top	Distance from the top that counts as reaching it (px, fires oas-require-more with from=top, default 0)	—	—

Events

Event	Description
oas-require-more	Fired once when scrolling enters the top/bottom threshold edge (not repeatedly while staying, re-arms after leaving), detail: { from: "top" | "bottom" }; for loading history/new entries
oas-search	Search filter report: fired when the keyword or the data changes (deduped for identical state), detail: { keyword, matched, total } (matched = matching line count, total = total lines; the filter window is the currently loaded lines)

CSS Variables

CSS Variable	Default
--oas-log-font	inherit
--oas-log-loading-mask	color-mix(in srgb, var(--oas-color-bg) 65%, transparent)
--oas-log-mark-bg	color-mix(in srgb, var(--oas-color-warning) 18%, transparent)
--oas-log-mark-color	var(--oas-color-warning-text)

Parts: ::part(viewport) scroll viewport, ::part(log) log content, ::part(row) a single row, ::part(line-number) line number, ::part(line) line text, ::part(empty) empty state.