Example #

Import the createCustomElement function together with a renderer function and html template literal tag into your Javascript file:


// import the createCustomElement function
import { createCustomElement } from 'https://cdn.skypack.dev/ficusjs@3/custom-element'

// import the withLocalState function for internal reactive state
import { withLocalState } from 'https://cdn.skypack.dev/ficusjs@3/with-local-state'

// import the renderer and html tagged template literal from the uhtml renderer
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/uhtml'

props: {
personName: {
type: String,
required: true
state () {
return {
greeting: 'Hello'
render () {
return html`
${this.state.greeting}, there! My name is ${this.props.personName}


Component names require a dash to be used in them; they cannot be single words.

To use the component, place the tag name as you would with regular HTML:


<my-component person-name="Andy"></my-component>