FAST中@customElement与基于组合的组件定义差异解析

🐢 方式一：模板与样式即时解析 #

• 组件类继承自@microsoft/fast-element中的FASTElement
• 使用@microsoft/fast-element提供的@customElement装饰器完成注册
• 组件名称必须包含连字符“-”（符合Web Components自定义元素命名规范）
• 传入装饰器的模板与样式会被即时解析
• 无法扩展PartialFASTElementDefinition类型
• 定义模板和样式时，无法访问ElementDefinitionContext上下文对象

示例代码：

import { FASTElement, customElement, html, css } from "@microsoft/fast-element";

const counterStyles = css`/* 组件样式定义 */`;
const counterTemplate = html<NameTag>`<!-- 组件模板内容 -->`;

@customElement({
    name: 'name-tag',
    template: counterTemplate,
    styles: counterStyles,
    shadowOptions: { mode: 'open' }
})
export class NameTag extends FASTElement {
    @attr name = "Sally";
}

🐅 方式二：可扩展的延迟模板与样式解析 #

• 组件类继承自@microsoft/fast-foundation中的FoundationElement
• 组件基础名称无需包含连字符，注册时会自动与DesignSystem的前缀拼接生成符合规范的自定义元素名
• 模板与样式通过FoundationElement基类的compose方法完成解析与注册
• 模板和样式支持延迟解析，核心优势是：
  • 可以访问ElementDefinitionContext上下文
  • 能够扩展自定义的FoundationElementDefinition类型，添加自定义配置项

示例代码：

import { FoundationElement, html, css } from "@microsoft/fast-foundation";

export class Counter extends FoundationElement {
    @attr count = 0;

    increment() {
        this.count++;
    }
}

// 扩展自定义配置项类型
interface CounterDefinition extends FoundationElementDefinition {
    defaultButtonContent?: string;
    defaultButtonColour?: string;
}

// 延迟解析的样式，可接收上下文与自定义配置
const counterStyles = (
    context: ElementDefinitionContext,
    definition: CounterDefinition
) => css`/* 根据上下文和配置生成样式 */`;

// 延迟解析的模板，可接收上下文与自定义配置
const counterTemplate = (
    context: ElementDefinitionContext,
    definition: CounterDefinition
) => html`<!-- 根据上下文和配置生成模板 -->`;

// 注册组件
export const counter = Counter.compose<CounterDefinition>({
    baseName: 'counter',
    template: counterTemplate,
    styles: counterStyles,
    defaultButtonContent: "Count!",
    defaultButtonColour: "pink"
});

🦆 方式三：无装饰器的即时解析变体 #

这种方式本质和方式一逻辑一致，只是不使用装饰器，改为通过FASTElement.define方法手动注册组件，同样不支持延迟解析模板与样式，也无法访问ElementDefinitionContext。

示例代码：

import { FASTElement, html, css, define } from "@microsoft/fast-element";

const counterStyles = css`/* 组件样式 */`;
const counterTemplate = html<NameTag>`<!-- 组件模板 -->`;

export class NameTag extends FASTElement {
    @attr name = "Sally";
}

// 手动注册组件
define(NameTag, {
    name: 'name-tag',
    template: counterTemplate,
    styles: counterStyles,
    shadowOptions: { mode: 'open' }
});

内容的提问来源于stack exchange，提问作者marai.hmm