Element styles

All elements render their content inside Shadow DOM, so there will be no conflicts between Fibbl's styles and client's styles inside the elements.

But the elements themselves can be styled by clients. The elements have default styles, e.g.

:host {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

You can reset the styles completely and maintain them by yourself, e.g.

fibbl-model-viewer {
    all: unset;
    /* display, width and height are the most important */
    display: block;
    box-sizing: border-box;
    width: 300px;
    height: 50vh;
    /* Anything else you font to add */
}

All elements are responsive and usually don't have predefined sizes. To provide freedom in styling, elements' content don't rely on :host styles, but try to get all the space via width: 100%; height: 100%. So it's required to provide elements with explicit width and height. How you do it is up to you.

However, there are some pitfalls. E.g. you can scale your element via flex inside a container with min-height value and no explicit height. In this case the element itself will take some space, but its content won't be visible ( because it will be of 0 size). If possible provide the element with explicit sizes or use display: grid; grid-template: 1fr / 1fr; as an escape hatch. Inside a grid inner elements will take all space. However, explicit sizes are preferable.

As for other properties like border, background, margin, width, height etc., which cannot affect inner layout, you can change them as you want.

Expandable elements

Some elements have built-in expand functionality (e.g. fibbl-model-viewer and fibbl-carousel). Besides the fact they both can be styled with custom CSS, they preserve their background when expanded.

However, if the background color is transparent (the alpha channel isn't 1), it is replaced with white color. But all background images and gradients are preserved. If the custom background color is opaque, then it is preserved too.

Custom markup

In case of elements which accept children elements, e.g. fibbl-bar with buttons, the default styles for the buttons are provided, but in most cases they will have to be changed. In this case it's better to always reset the styles completely, if you want to customize your own markup, e.g.:

fibbl-bar {
    all: unset; /* reset all the styles */
    display: flex;
    /* your rules here */
}

fibbl-bar [data-element] {
    all: revert; /* reset all the styles */
    /* your rules here */
}

The reset of styles isn't mandatory, but the default styles can change in the future, e.g. border can be replaced with box-shadow and you will end up with your custom border and default box-shadow, if you haven't reset it. Fibbl guarantees that default styles will be reasonable and relatively good-looking, but not that they will not change in the future.