createCustomElement function

The createCustomElement function defines a new component with the provided tag plus declarative object and registers it in the browser as a custom element.

Component names require a dash to be used in them; they cannot be single words - this is mandatory according to the custom element API.

Arguments

When using the createCustomElement function, you must pass two arguments:

  1. tag name (for example my-component) - names require a dash to be used in them; they cannot be single words
  2. an object that defines the properties of the component

The following properties are used when creating components:

PropertyRequiredTypeDescription
rendereryesfunctionA function that renders what is returned from the render function
renderyesfunctionA function that must return a response that can be passed to the renderer function for creating HTML
rootstringSets the root definition for the component
propsobjectDescribes one or more property definitions - these are attributes and instance properties that can be set when using the component
computedobjectContains one or more getters (functions that act like properties) that are useful when rendering
*functionFunctions that are useful in performing actions and logic
createdfunctionInvoked when the component is created and before it is connected to the DOM
mountedfunctionInvoked when the component is first connected to the DOM. This may trigger before the components contents have been fully rendered
updatedfunctionInvoked when the component is moved or reconnected to the DOM. This may trigger before the components contents have been fully rendered
removedfunctionInvoked each time the component is disconnected from the DOM
// import the createCustomElement function
import { createCustomElement } from 'https://cdn.skypack.dev/ficusjs@6/custom-element'

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

createCustomElement('my-component', {
  renderer,
  props: {
    personName: {
      type: String,
      required: true
    }
  },
  render () {
    return html`
      <p>
        Hi, there! My name is ${this.props.personName}
      </p>
    `
  }
})