FAST 是一组基于 Web Components 和现代 Web 标准的技术集合，旨在帮助您高效应对网站和应用程序设计与开发中的常见挑战。Web Components 是指一系列网络标准，旨在创建自定义 HTML 元素。这些标准包括定义新 HTML 标签、封装 HTML 渲染和 CSS、参数化 CSS 以及组件样式化等功能。FAST 通过 @microsoft/fast-element 利用 Web Components，提供属性同步、MVVM 支持、高效模板渲染、样式组合等功能，且其经过优化，体积小，性能高效。
特性
- 使用@microsoft/fast-element构建可复用的高性能Web组件。
- 借助@microsoft/fast-foundation快速建立基于W3C OpenUI的设计系统，无需重复实现组件逻辑。
- 利用@microsoft/fast-ssr实现Web Components的标准SSR功能。
- 结合@microsoft/fast-router打造SPA和丰富用户体验。
- 对于React用户，@microsoft/fast-react-wrapper使得Web组件轻松成为原生React组件。
- 兼容任何库、框架或构建系统，灵活度极高。
安装
npm install --save @microsoft/fast-element创建 Web 组件，使用 FAST 创建的 Web 组件由 3 个部分组成：HTML 模板、CSS 样式和组件逻辑。Web 组件可以像按钮一样简单，也可以像整个页面的交互体验一样复杂。
import { attr, css, FASTElement, html } from "@microsoft/fast-element";
/**
* Create an HTML template using the html tag template literal,
* this contains interpolated text content from a passed attribute
*/
const template = html`<span>Hello ${x => x.name}!</span>`
/**
* Create CSS styles using the css tag template literal
*/
const styles = css`
:host {
border: 1px solid blue;
}
span {
color: red;
}
`;
/**
* Define your component logic by creating a class that extends
* the FASTElement, note the addition of the attr decorator,
* this creates an attribute on your component which can be passed.
*/
class HelloWorld extends FASTElement {
@attr
name: string;
}
/**
* Define your custom web component for the browser, as soon as the file
* containing this logic is imported, the element "hello-world" will be
* defined in the DOM with it's html, styles, logic, and tag name.
*/
HelloWorld.define({
name: "hello-world",
template,
styles,
});添加到你的项目里
<script type="module" src="path/to/hello-world.js"></script>
<hello-world name="Earth"></hello-world>
