Add props at compile time #2559
Description
Stencil version:
@stencil/core@1.16.0
I'm submitting a:
- bug report
- feature request
- support request
Current behavior:
You have to enumerate every possible attribute on an html element that you want to enhance with your webcomponent.
Expected behavior:
It would be REALLY nice to be able to say, for example this is a <button>, so I need all of those additional properties too, and not have to type them out as @Prop()s.
Steps to reproduce:
Related code:
This is what you currently have to write:
import { Component, h, Prop } from '@stencil/core';
@Component({
tag: 'my-button',
styleUrl: 'my-button.scss',
shadow: true
})
export class Button {
@Prop() autoFocus:boolean;
@Prop() disabled:boolean;
@Prop() form:string;
@Prop() formAction:string;
@Prop() formaction:string;
@Prop() formEncType:string;
@Prop() formenctype:string;
@Prop() formMethod:string;
@Prop() formmethod:string;
@Prop() formNoValidate:boolean;
@Prop() formnovalidate:boolean;
@Prop() formTarget:string;
@Prop() formtarget:string;
@Prop() name:string;
@Prop() type:string;
@Prop() value:string | string[] | number;
render() {
return (
<button autoFocus={this.autoFocus} disabled={this.disabled} form={this.form} formAction={this.formAction} formaction={this.formaction} formEncType={this.formEncType} formenctype={this.formenctype} formMethod={this.formMethod} formmethod={this.formmethod} formNoValidate={this.formNoValidate} formnovalidate={this.formnovalidate} formTarget={this.formTarget} formtarget={this.formtarget} name={this.name} type={this.type} value={this.value} >
<slot />
</button>
);
}
}compared to something like this:
import { Component, h, Prop, Isa } from '@stencil/core';
@Component({
tag: 'my-button',
styleUrl: 'my-button.scss',
shadow: true
})
export class Button {
@Isa() button;
render() {
return (
<button {...this.injectedProps} >
<slot />
</button>
);
}
}Other information: