Add a bindable content property

See the Development process to load a base element in dev mod.

We will add a text property on our element, so that the user can dynamically change the text of the element.

ww-config.js

The first step is to declare this property on the properties field of the configuration:

properties: {
    // [...]
    title: {
      label: {
        en: "Title",
      },
      type: "Text",
      defaultValue: "My title",
      bindable: true,
    },
}

Use the value inside the template

<div class="my-element">
    <h1>{{ content.title }}</h1>
    <p :style="textStyle">I am a custom element!</p>
  </div>

And that's all!

WARNING

Now that this property is bindable, the user can potentially send you any type of data. Your code needs to be defensive, and check the type of this property.

See also: Add a dropzone for binding repeatable content