@microsoft/fast-components
Advanced tools
@microsoft/fast-components is a library of Web Components that composes the exports of @microsoft/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 @microsoft/fast-components library, use either npm or yarn as follows:
npm install --save @microsoft/fast-components @microsoft/fast-foundation
yarn add @microsoft/fast-components @microsoft/fast-foundation
Within your JavaScript or TypeScript code, import and register desired components with the DesignSystem:
import { DesignSystem } from "@microsoft/fast-foundation"
import { fastAnchor } from '@microsoft/fast-components';
DesignSystem.getOrCreate().register(
fastAnchor()
);
Alternatively you can easily register all components:
import { DesignSystem } from "@microsoft/fast-foundation"
import { allComponents } from '@microsoft/fast-components';
DesignSystem.getOrCreate().register(
Object.values(allComponents).map(definition => definition())
);
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.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-components/dist/fast-components.min.js"></script>
</head>
<!-- ... -->
</html>
The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:
<script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-components@2.16.0/dist/fast-components.min.js"></script>
:::note 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 yarn start.
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.
FAQs
A library of Web Components
The npm package @microsoft/fast-components receives a total of 4,856 weekly downloads. As such, @microsoft/fast-components popularity was classified as popular.
We found that @microsoft/fast-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.