Props #

You pass props as HTML attributes on the component and then get access to them inside your component's JavaScript with this.props. Props must be defined using camel-case but set as kebab-case in HTML.
Props will be observed by default which means they react to changes.

<example-component class-name="a-class" required="true"></example-component>

You'll need to define your prop types in the component definition, like so:

props: {
className: {
type: String,
default: 'btn',
required: true, // is this required?
observed: false // turn off observing changes to this prop
},
required: {
type: Boolean,
default: false
}
}

The following properties can be used to define props:

PropertyRequiredValue
typeyesThis must be one of String, Number, Boolean or Object
defaultSet a default value if one is not set
requiredIs this prop required when the component is used? If so, set to true
observedSet to false to turn off observing changes to this prop

Instance properties #

Prop values can be set on instances of components. Each prop you define for a component becomes an instance property and can be set using Javascript.

const exampleComponentInstance = document.querySelector('example-component')
exampleComponentInstance.className = 'another-value'