Support for declarative HTML attributes schema
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.