Components

The purpose of components is to reuse a specific set of behaviors or HTML structure in many places. They can be customized using properties which can be set in both the HTML and JS in the same way as the id property.

Example using custom behavior and property

      
elytra.component("funbutton", {
  config: {
    onclick() {
      alert("Fun ".repeat(this.exclamations));
    },
    style: {
      fontSize: "30px",
      background: "blue",
      color: "white",
    }
  },
  props: ["exclamations"]
});
      
    

Example using custom HTML structure

      
elytra.component("funlist", {
  init: items =>
    `<ul>${items.split(",").map(item => `<li>${item}</li>`).join("")}</ul>`
});