Skip to content

Support for declarative HTML attributes schema

Compare
Choose a tag to compare
@tdumitrescu tdumitrescu released this 08 Nov 01:18
· 343 commits to master since this release

For components that accept HTML attributes, attrsSchema lets them define names, types, and default values which will be populated automatically in the component's attrs prop. For example:

class MyWidget extends Component {
  static get attrsSchema() {
    return {
      ...super.attrsSchema,
      'closeable': `boolean`,
      'complex-stuff': `json`,
      'title-text': {type: `string`, default: `Hello world`},
    };
  }
}

// access within component code:
this.attrs.closeable // false

// also accessible within templates via $attrs:
$attrs[`complex-stuff`] // pre-parsed from JSON

This is an optional mechanism that helps standardize attribute-parsing and reduce attributeChangedCallback boilerplate.