export default function Checkbox() {
  createWebComponent(
    "bau-checkbox",
    ({ props }) => {
      // Example of listening to props
      observe(props.checked, console.log);

      const elem = html`<label
        class="flex w-max select-none place-items-center border p-4 leading-11"
      >
        <input type="checkbox" class="h-6 w-6" ${props} />
          <slot></slot>
        </label>` as HTMLLabelElement;

      return elem;
    },
    { reflects: true },
  );
}
Copy

Let's breakdown the createWebComponent function. The first argument is the name of the web component. The second this is a function, in which the template is being returned. But this is not only for templating, but also reactive handling. Feel free to access the props in conditions or for the template. Lastly, see the reflects on the object. This defaults to false but once activated changes on the DOM will be observed via a MutationObserver.

This is how the usage could look like:

<bau-checkbox id="checkbox" ${propsCheckbox}>
  <p class="pl-4">Test label</p>
</bau-checkbox>
Copy