fast-components is a library of Web Components that composes the exports of
fast-foundation with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the quick start to get started using the components.
To install the
fast-components library, use either
yarn as follows:
npm install --save @microsoft/fast-components
yarn add @microsoft/fast-components
Looking for a setup that integrates with a particular front-end framework or bundler? Check out our integration docs.
A pre-bundled script that contains all APIs needed to use FAST Foundation is available on CDN. You can use this script by adding
type="module" to the script element and then importing from the CDN.
<!-- ... -->
The above CDN location points to the latest release of
fast-components. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.
For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.
To start the component development environment, run
Known issue with Storybook site hot-reloading
Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the
CustomElementsRegistry once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message:
Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry
This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.