Styling

Velox styles elements with CSS. A component declares styles in its <style> block, elements can carry inline style attributes, and a built-in user-agent stylesheet provides sensible HTML defaults. All three layers run through one cascade on every frame — there is no separate build step for CSS.

Where styles live

Inline styles win over stylesheet rules, which win over the UA sheet — the same ordering browsers apply.

<template>
  <div class="card" style="margin-top: 12px">…</div>
</template>

<style scoped>
.card {
  width: 100%;
  padding: 16px;
  background-color: #1a1a2e;
}
</style>

Scoped and global styles

Declare the block <style scoped> to confine every rule to that component’s own elements:

• The component gets a unique data-v-<hash> scope id derived from its name.
• Each selector is rewritten with the matching attribute selector — .header becomes .header[data-v-abc1ef23].
• The scope id is exposed as SCOPE_ID so rendered VNodes are tagged with the same attribute the scoped selectors rely on.

An unscoped <style> block passes through unchanged and applies globally. Inside a scoped block, @keyframes inner selectors (from, to, percent offsets) stay unscoped while the outer rules are scoped.

The cascade

apply_with_cascade composes the layers UA < author < inline and runs the result over the whole tree once per frame:

• Matching is by compound selector against the element and, for multi-part selectors, its ancestors.
• :hover matches when the pointer is over the element (the renderer supplies the hover predicate).
• ::placeholder declarations are written to a separate attribute (style:placeholder) so they can never repaint the element’s own value.

Selectors

Note: ::placeholder is the only pseudo-element Velox supports, and it matches only an <input> — not a textarea — that carries a non-empty placeholder attribute and an empty value. A filled field shows the value, not the placeholder, so a ::placeholder rule never wins there.

Supported properties

The table below lists every property the style engine parses and which rendering reader honors it. The live path has three readers — the flexbox/table layout pass, the box painter, and the text painter — and a property is honest only if at least one of them looks it up. Properties marked parsed only survive the cascade but are then dropped; veloxc lint reports them.

Layout and box model

Flexbox

Backgrounds and borders

Typography

Overflow and misc

Tip: veloxc lint reports exactly the parsed only properties above, by file and rule index. Unknown declarations are filtered out silently by the cascade, so lint deliberately does not flag them — vendor prefixes and custom properties stay quiet.

Tip: to hide an element use display: none (or v-show in templates), not visibility: hidden. To round corners use border-radius, and give depth with border — not box-shadow.

Units

All length values share one parser:

A responsive page fills the viewport with a root of width: 100%; min-height: 100vh — the canonical pattern in every scaffold and example, and one the layout engine reflows visibly on every window resize.

Colors

Inheritance

Inherited properties flow from parent to child per browser CSS behavior:

color, font-size, font-family, font-weight, font-style, line-height, letter-spacing, text-align, vertical-align, white-space, visibility, cursor, text-decoration

Everything else is non-inherited: each element reads its own declaration, so a descendant of a clipped box is not clipped unless it says so. ::placeholder declarations never inherit — not even from their own element.

Fonts

Font matching resolves against system fonts and custom font files. font-weight accepts the CSS keywords and the full 100–900 numeric scale (Thin 100 through Black 900, default Normal 400); font-style accepts normal, italic, and oblique; line-height accepts normal (browser default 1.2×), a number multiplier, or a px length.

See also

• Template Syntax — the <style scoped> attribute and directive reference.
• Renderer — how the cascaded tree is laid out and painted.
• Dev Workflow & HMR — editing styles live.