Events and errors

Components can also have events that you can capture to receive information from the component. The most common is the "change" event to receive data if they have changed in the component.

const search = document.getElementById("componentName");
search.addEventListener("change", function (e) {
  const data = e.detail;
  console.log(data);
});

Waiting for the component to load

if the component has already loaded on the screen. If you try to subscribe to other events, or use public functions outside of this loaded event, it may fail if it is not loaded yet.

const search = document.getElementById("componentID");
search.addEventListener("loaded", () => {
  console.log("Component loaded");
});

Subscribe to a component's error

You can tell if a component has thrown an error on load by making a listener to the "error" event, for example:

const search = document.getElementById("componentID");
search.addEventListener("error", (e) => {
  console.log(e);
});