Introduction

@microsoft/fast-components leverages @microsoft/fast-element to style components. For details on how to apply CSS, see leveraging CSS.

Hiding undefined elements

Custom Elements that have not been upgraded and don't have styles attached can still be rendered by the browser but they likely do not look how they are supposed to. To avoid a flash of un-styled content (FOUC), visually hide Custom Elements if they have not been defined:

:not(:defined) {
visibility: hidden;
}
important

The consuming application must apply this, as the components themselves do not.