Skip to content

feat: add a default value for non-decorator use cases when defining attributes #7132

@janechu

Description

@janechu

🙋 Feature Request

Currently when defining attributes for decorator use cases we use a class initializer, for non-decorator use cases we must define in the constructor. This is a little confusing and not ergonomic as it complicates the custom element class, it would be preferable to define this default value in the attribute configuration.

🤔 Expected Behavior

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

export class MyElement extends FASTElement {
  // component logic
}

MyElement.define({
  name: 'my-element',
  template: html`<div>${(x) => x.currentCount}</div>`,
  styles: css`div { background: red }`,
  attributes: [
    {
      attribute: 'current-count',
      property: 'currentCount',
      value: 42
    },
  ],
});

😯 Current Behavior

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

export class MyElement extends FASTElement {
  constructor() {
    super();

    this.currentCount = 42;
  }
}

MyElement.define({
  name: 'my-element',
  template: html`<div>${(x) => x.currentCount}</div>`,
  styles: css`div { background: red }`,
  attributes: [
    {
      attribute: 'current-count',
      property: 'currentCount'
    },
  ],
});

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions