Как заставить работать фундаментальный элемент FAST ui?

Question

Я новичок в FAST и пытаюсь заставить FoundationElement работать. Я выполнил основные шаги, описанные в документации, но это не работает. это мой код:

      import { html } from '@microsoft/fast-element';
import { FoundationElement } from '@microsoft/fast-foundation';

const template = html<Parent>`<p>I'm a parent</p>
  <slot></slot>`;

class Parent extends FoundationElement {
  connectedCallback() {
    super.connectedCallback();
    console.log('connection');

    this.addEventListener('change', (e) => {
      console.log('handle change event');
    });
  }
}

const parent = Parent.compose({ baseName: 'my-element', template });
provideFASTDesignSystem().register(parent());

Моя версия машинописного текста — 4.3, а пакет, который я использую, — Snowpack.

Answer 1

Код фреймворка прослужит от 5 до 10 лет.

Нативный код будет длиться всю жизнь.

Answer 2

Вы хотите расширить FASTElement. FoundationElement удаляется в версии V2.

Самый простой способ создать элемент — использовать декоратор @customElement:

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

const template = html`<template><p>I'm a parent</p><slot></slot></template>`;

const styles = css``;

@customElement({
    name: "my-element",
    template: template,
    styles: styles,
})
export class MyElement extends FASTElement {}

FAST на самом деле не является «фреймворком», я думаю о нем как об утилитах, упрощающих создание веб-компонентов (наблюдаемые/привязки/директивы великолепны, кстати). Они не привязывают вас к определенной архитектуре приложения.