---
sidebar_position: 10
---

# Component styling

Components use the shadow DOM, which isolates the CSS from its parent document. An exception is fonts, which are inherited from the parent.

To style a component to match the theme of the parent, a number of CSS variables are available.

## CSS variables

### Primary button color

Color of primary buttons

    --primary-button-color: #xxxxxx;

### Thin line

Line height in pixels

    --thin-line: 1px solid #xxxxxx; (will be 0.5px if supported by device, with adjusted color)

### Basket font size
   
Default font size of basket

    --basket-font-size: x rem; (different size depending on mobil/desktop breakpoint)

### Basket line height

Line height of items in basket

    --basket-line-height: x rem;


## Example of a block component that uses a CSS variable

```javascript
export default async context => {
    context.componentLoader.registerBlockComponent({
        location: 'categories-main',
        loadContent: async ctx => {
            const { shadow } = ctx;

            // use the same color of text as the color of primary button
            const css = new CSSStyleSheet();
            await css.replace(`
                html {
                    color: var(--primary-button-color);
                }
            `);
            shadow.adoptedStyleSheets.push(css);
        },
    });
};
```