Skip to main content
↓ Download as Markdown

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​

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);
        },
    });
};