Input values

Via the ComponentContext instance you can retrieve the values for the inputs declared in the manifest file. The example below shows how you would read the value of a text input (name) and use it to update the template content.

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script>
export default {
  name: 'hello-world',
  props: ['context'],
  data() {
    return { name: '' };
  },
  created() {
    this.name = this.context.inputs.name;
  }
};
</script>

<style scoped></style>

<script>
  import { onMount } from 'svelte';

  export let context;
  let name = '';
  
  onMount(() => {
    name = context.inputs.name;
  });
</script>

<h1>Hello, { name }!</h1>

<style></style>

const template = document.createElement('template');
template.innerHTML = `<h1>Hello, <span id="name"></span>!</h1>`;

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.appendChild(template.content.cloneNode(true));
   	this.shadowRoot.getElementById('name').textContent = this.context.inputs.name;
  }
}

customElements.define('hello-world', HelloWorld);