0

I'm new to FAST and I'm trying to get foundationElement to work. I've followed the basic steps in the docs but it's not working. this is my code:

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());

My typescript version is 4.3 and the bundler i'm using is snowpack

Salihu Dickson
  • 11
  • 1
  • 3

2 Answers2

0

Framework code will last 5 to 10 years.

Native code will last a life time.

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>
Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
0

You want to extend FASTElement. FoundationElement is being removed in V2.

Easiest way to create an element is to use @customElement decorator:

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 is not really a "framework", I think of it as utilities to help make authoring web-components easier (observables/binding/directives are glorious btw). They don't lock you into a particular app architecture.

Stephane Comeau
  • 1
  • 1
  • Thanks for your help. Although from what I understand, using foundationElement allows for exposure to the ElementDefinitionContext and FoundationElementDefinition options. These are supposed to give me a bit more of a handle on things as a library author. Does the customElement decorator also give access to these options? – Salihu Dickson Apr 29 '23 at 13:26
  • Those concepts are going away in v2, so you probably want to avoid investing there. I would suggest taking a look at "Adaptive-Web-components" (https://github.com/Adaptive-Web-Community/Adaptive-Web-Components/tree/main/packages/adaptive-web-components) which is a library/design system based on FASTV2. – Stephane Comeau May 10 '23 at 21:59