在FAST中@customElement和基于组合的组件定义有什么区别?

Question

据我所知，在FAST中基本上有两种(+)定义组件的方法。

我将提供我自己对下面问题的答案，我想验证的是我是否正确理解了差异，如果有什么要补充的。

到目前为止我发现了什么:

🐢One - Immediate Template &风格分辨率

• 类定义从@microsoft/fast-element扩展FASTElement
• 使用@microsoft/fast-element
中的@customElement装饰剂
• it必须名称中包含-
• 它的模板和样式(通过@customElement装饰器传递)立即解析
• it不能扩展其PartialFASTElementDefinition
• it不能访问ElementDefinitionContext当定义它的模板和样式

伪代码示例(部分来自官方文档):

const counterStyles = css`/* ... */`;
const counterTemplate = html<NameTag>`<!-- ... -->`;
@customElement({
name: 'name-tag',
counterTemplate,
counterStyles,
shadowOptions:
})
export class NameTag extends FASTElement {
@attr name = "Sally";
}

🐅两个可扩展和惰性模板&风格分辨率

• 类定义从@microsoft/fast-foundation扩展Foundationelement
• 它不需要在其名称中包含-(因为它将以DesignSystem的前缀添加，将注册它)
• 的模板和样式是通过compose方法解决的，该方法通过FoundationElement基类
提供给组件。
• 模板和样式都可以惰性解析
  • 惰性解析的好处是允许您访问ElementDefinitionContext和可扩展的FoundationElementDefinition

伪代码示例(部分来自官方文档):

export class Counter extends FoundationElement {
@attr count = 0;
increment() {
this.count++;
}
}
/* if CounterDefinition wouldny be defined then expressions below would use FoundationElementDefinition instead*/
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',
counterTemplate,
counterStyles,
defaultButtonContent: "Count!",
defaultButtonColour: "pink"
});

🦆三/一+ -一种但没有装饰?

• 据我所知，它基本上就像One方法，但没有装饰器，这意味着它不能懒惰地解析其样式和模板

Answer 1

你所说的区别在大多数情况下是正确的。

第一种机制是人们在应用程序中构建组件时最常用的机制。它立即将模板和样式与元素关联起来，然后立即将组件注册到web平台本身。

第二种机制主要用于那些建筑设计系统，他们希望将系统提供给其他人，并使那些消费者能够在使用系统之前定制系统的部分。因此，它允许惰性地提供部分模板，更改样式等。

第二种机制在即将发布的2.0/3.0版本中已弃用。原因如下:

• 我们发现这两种不同的方法让我们的社区感到困惑
• 它使组件注册更加复杂
• 在启动时产生了不必要的性能开销。

请允许我鼓励你阅读这个问题:https://github.com/microsoft/fast/issues/5901我更深入地探讨了与这个问题相关的问题和动机，并描绘了我们正在为即将到来的新版本努力的未来。

与定义和注册组件相关，您需要记住一些注意事项:

• 考虑该组件是一次性的还是打算被重用。
• 如果组件打算被重用，它会在当前应用程序之外被重用吗?如果是，需要定制吗?
• 考虑组件是否应该立即向平台注册自己，或者消费者是否应该控制注册的时间。这可能与前面的考虑有关。