🧬
Props(Properties)
The props in Atomico are the way to associate the webcomponent properties and reactive attributes that trigger the logic or interface of the webcomponent.
Props is the Atomico recommended way to declare visible and accessible states at the instance level of your webcomponents, with props you can:
- 1.Access state via instance, example:
document.querySelector("my-component").myStateProp
. - 2.Dispatch events on prop value change, example:
document.querySelector("my-component").addEventListener("myPropChange",console.log)
. - 3.Reflect attributes as prop, example:
<my-component my-prop="....">
todocument.querySelector("my-component").myProp
. - 4.define strict input types for props.
Any function that represents the webcomponent will be able to associate the static object props for the declaration of reactive properties and attributes, for example:
import { c } from "atomico";
function component() {
return <host />;
}
component.props = {
// Simple statement
value1: String,
// Structured statement
value2: {
type: String,
reflect: true,
attr: "advaceprop",
value: "default string",
event: {
type: "UpdateAdvanceProp",
bubbles: true,
},
},
};
customElement.define("web-component", c(component));
- 1.The prop names in Camel Case format will be translated to for use as an attribute to the Kebab Case format, this behavior can be modified through the "attr" property when using a structured declaration.
- 2.Structured declarations require the "type" property minimally.
- 3.Not all types can use the "reflect" properties.
- 4.The declaration of the "value" property can vary depending on the type.
Simple statements allow setting just type validations.
component.props = {
propString: String,
propNumber: Number,
propObject: Object,
propArray: Array,
propBool: Boolean,
propCallback: Function,
};
Improve the definition by adding utility declarations, allowing for example to reflect the property's value as attributes, automatically emit events or associate default values. Remember these types of declarations minimally require the use of the type property.
// valid declaration
component.props = { myName: String };
// valid declaration
component.props = { myName: { type: String } };
Type | Supports reflect |
---|---|
String | ✔️ |
Number | ✔️ |
Boolean | ✔️ |
Object | ✔️ |
Array | ✔️ |
Promise | ❌ |
Symbol |