如何让 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 年。

原生代码将持续一生。

customElements.define("my-element", class extends HTMLElement{
  constructor(){
    super().attachShadow({mode:"open"})
           .innerHTML = `<h3 part="title">I'm a parent</h3><slot></slot>`;
  }
  connectedCallback(){
    this.onclick = (evt) => alert(`${this.nodeName} was here!`);
  }
})

#EL1::part(title){
  color:green;
}
 
#EL2::part(title){
  background:blue;
  color:gold;
}

<my-element id="EL1">
  Cool Web Component
</my-element>

<my-element id="EL2">
  <b>another</b> great Web Component
</my-element>

Answer 2

您想扩展 FAST-Element。 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 并不是真正的“框架”，我认为它是帮助更轻松地编写 Web 组件的实用程序（顺便说一句，可观察/绑定是光荣的）。他们不会将您锁定在特定的应用程序架构中。