Reative properties

1-component-props.jsx

import { c } from "atomico;

function component() {
  return <host></host>;
}

component.props = {
  value: String,
  checked: {
    type: Boolean,
    reflect: true,
    value : false,
    event: { type: "change", bubbles: true, composed: true },
  },
};

customElements.define("my-component", c(component));

2-component-dom.js

const myComponent = document.querySelector("my-component");

myComponent.addEventListener("change", ({ target }) => {
  console.log(target.checked);
});
// Changes are added to the queue
// update of the webcomponent
myComponent.value = "next value";
myComponent.checked = "next value";
// to read the changes from the DOM we 
// must wait for the updated promise to finish
myComponent.updated.then(() => {
  console.log("dom update");
});