FAST

https://fast.design/docs/3.x/declarative-templates/defining-elements/

Admin

FAST is a library for building performant, standards-based Web Components with support for modern...

Tokens:432

Snippets:7

Trust Score:9.4

Update:5 months ago

Show doc for...

Tokens:

Raw

### Install FAST Element Package

Source: https://fast.design

Use npm to install the FAST Element package. This is the first step to begin using FAST for web component development.

```bash
npm install @microsoft/fast-element
```

--------------------------------

### Add Custom Web Component to HTML

Source: https://fast.design

Integrate your defined custom web component into an HTML file. This example shows how to use the 'hello-world' component with an attribute.

```html
<hello-world name="Earth"></hello-world>
```

--------------------------------

### Define a Custom Web Component with FAST Element

Source: https://fast.design

Create a custom web component by extending FASTElement and defining its name, template, and styles. This example shows a simple 'hello-world' component.

```typescript
/*
 * import utilities from @microsoft/fast-element
 */
import { FASTElement } from "@microsoft/fast-element/fast-element.js";
import { attr } from "@microsoft/fast-element/attr.js";
import { css } from "@microsoft/fast-element/css.js";
import { html } from "@microsoft/fast-element/html.js";

/*
 * Define your component logic
 */
class HelloWorld extends FASTElement {
  @attr
  name: string;
}

/*
 * Define your component for the browser and
 * include your CSS styles and HTML template
 */
HelloWorld.define({
  name: "hello-world",
  template: html`<span>Hello ${x => x.name}!</span>`,
  styles: css`
    span {
      color: red;
    }
  `,
});
```

Tokens:

Raw