How to handle and pass events to the lit component from defining component

Question

I am trying to design web components using lit Element and I need an help regarding the events. As we can see from the attached snippet we could use @change="${this.handleEvent}" in html template and handle the function handleEvent(e){} inside the lit Element component. By this the events are limited and controlled only in the lit web components.

However, when other people use our web components they don't have much control or access to the values over these events in the defining component. For instance, if we have an index.html file and I use it like <my-element onchange="handleEvent(e)"></my-element>, I should have the access to the onchange event and call a function inside the index file only.

So, Is there a way to achieve this to the similar behavior of regular html events instead of writing the events which is limited in the lit Element web components.

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script type="module">
  import { LitElement, html, css } from 'https://unpkg.com/lit-element/lit-element.js?module';
  
  class MyElement extends LitElement {
  
   static get properties() {
      return {
        checked:  { type: Boolean, attribute: true }
      };
    }
    
    static get styles() {
      return [
        css`
          div {
            padding: 10px;
            width: 90px;
            border: 2px solid orange;
          }
        `
      ];
    }
    
    render() {
      return html`
      <div>
         <input
            @change="${this.handleEvent}"
            ?checked="${this.checked}"
            type="checkbox" /> Checkbox
       </div>
      `;
    }
    
    handleEvent(e) {
      console.log(`Checkbox marked as: ${e.target.checked}`);
    }
  }
  customElements.define('my-element', MyElement);
</script>

// Index.html
<my-element></my-element> 
// I am expecting to pass an event and handle it in the importing 
component. 
// Something like: **<my-element onchange="handleEvent(e)"}></my- 
element>**

Canterbury

Answer 1

If you want to listen to events outside your element, you should dispatch an event like this:

const event = new Event('my-event', {bubbles: true, composed: true});
myElement.dispatchEvent(event);

The Lit documentation on events gives a good overview of how and when to dispatch events https://lit.dev/docs/components/events/#dispatching-events

Multipara

The documentation says to communicate between the web components using dispatchEvent. But what I am seeking help is when we use the webcomponents in some other project or when the component is imported somewhere else. Example if index.html is having the lit element I want to access like <my-element onchange="(e) => {console.log(e);}"></my-element> – Canterbury

@Canterbury That is functionality explicitly demonstrated in my answer's second code example. You cannot call it onchange though because that is the name of a built-in attribute. Go with something like onvaluechange or onstatechange. – Busty

Answer 2

Usually with your own custom elements you'll probably also want to define your own API to offer that to consumers of your components. That often also comes with defining your own events which your component emits.

See this simple (non-lit, but you get the idea) example:

customElements.define('foo-bar', class extends HTMLElement {
  input = document.createElement('input');
  constructor() {
    super();
    this.input.type = 'checkbox';
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(this.input);
    this.input.addEventListener('change', this.handleChange.bind(this));
  }
  // replaces the internal change event with an event you publish to the outside world
  // this event is part of your defined API.
  handleChange(e) {
    e.stopPropagation();
    const stateChange = new CustomEvent('state-change', { 
      bubbles: true, 
      composed: true,
      detail: { checked: this.input.checked }
    });
    this.dispatchEvent(stateChange);
  }
});

document.addEventListener('state-change', (e) => { console.log(e.detail); })

<foo-bar></foo-bar>

If you also want to support declarative event binding as the standard HTML elements do (and using which is widely considered bad practice), you can achieve that using observed attributes:

customElements.define('foo-bar', class extends HTMLElement {
  input = document.createElement('input');
  constructor() {
    super();
    this.input.type = 'checkbox';
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(this.input);
    this.input.addEventListener('change', this.handleChange.bind(this));
    this.declarativeValueChangeListener = this.declarativeValueChangeListener.bind(this);
  }
  // replaces the internal change event with an event you publish to the outside world
  // this event is part of your defined API.
  handleChange(e) {
    e.stopPropagation();
    const stateChange = new CustomEvent('state-change', { 
      bubbles: true, 
      composed: true,
      detail: { value: this.input.value }
    });
    this.dispatchEvent(stateChange);
  }
  
  static get observedAttributes() { 
    return [ 'onstatechange' ];
  }
  
  attributeChangedCallback(attr, oldVal, newVal) {
    if (oldVal === newVal) return; // nothing changed, nothing to do here
    if (newVal === null) { // attribute was removed
      this.removeEventListener('state-change', this.declarativeValueChangeListener)
    } else { // attribute was added
      this.addEventListener('state-change', this.declarativeValueChangeListener)
    }
  }
  
  declarativeValueChangeListener() {
    const functionStr = this.getAttribute(this.constructor.observedAttributes[0]);
    eval(functionStr);
  }
});


function baz() { console.log('baz executed through declarative binding of an outside handler!'); }

<foo-bar onstatechange="baz()"></foo-bar>

Busty

Thanks for the reply. Based on your opinions, I would like to go with first approach. As I see, the change event is being binded to the custom event and later on dispatching that to the outside world. But is there a way to define that or catch the event in the element itself rather than using document.addEventListener('state-change', (e) => { console.log(e.detail); })? – Canterbury

You can listen anywhere, starting on the component itself all the way up the ancestors until you reach document. It works just like listening to any other HTML element's events; it's just that you define your own set of events and put the data (payload) into event.detail in any format your API defines. – Busty

No, I think I there is a gap here, I want to use it inside the element tags such as <my-element onstatechange="func()"></my-element> and not with document.addEventListener. If we want to do this and maintain the first approach, is it possible? – Canterbury

Huh? This is exactly what the second approach adds. The only other way to achieve this is using a MutationObserver on the custom element, which you'd only ever do from the outside, because from the inside, you have the convenience wrapper attributeChangedCallback exactly for monitoring attribute changes. There is no other way to achieve that. – Busty

Answer 3

I don't understand why you need Events,
when a click on the input can execute either global Functions or local Methods.

No need for oldskool bind mumbo-jumbo, no need for observedAttributes

You can use the default onchange, because all Events exist on HTMLElement
Only inputs like textarea actually fire the Change Event

Used on any other HTMLElement nothing happens, you have to call this.onchange() or document.querySelector("foo-bar").onchange() yourself.
You can not do that with your own attribute names, as those values will always be a String, and not parsed as JS code by the Browser engine.

You need eval(code) though to execute the code within Component scope and make onchange="this.baz()" work.

customElements.define('foo-bar', class extends HTMLElement {
  constructor() {
    let input = document.createElement("input");
    input.type = "checkbox";

    super()
      .attachShadow({mode: 'open'}) 
      .append(input,"click me to execute ", this.getAttribute("onchange"));

    this.onclick = (evt) => { // maybe you only want input.onclick
      //evt.stopPropagation();
      let code = this.getAttribute("onchange");
      try {
        eval(code); // this.onchange() will only execute global functions
      } catch (e) {
        console.error(e,code);
      }
    }
  }
  baz() {
    console.log("Executed baz Method");
  }
});

function baz() {
  console.log("Executed baz Function");
}

<foo-bar onchange="baz()"></foo-bar>
<foo-bar onchange="this.baz()"></foo-bar>

<style>
 foo-bar { display:block; zoom:2 }
</style>

Important note

shadowDOM is what saves your ass here.

The onchange Event from the input does not escape shadowDOM
(Like composed:true does on Custom Events)

Without shadowDOM all onchange declarations on parent Elements will fire, because the Event bubbles:

<div onchange="console.log(666)">
  <input onchange="console.log(this)" type="checkbox">
</div>

<style>
  input { zoom:3 }
</style>

This is a good example where a shadowRoot on a regular HTMLElement can have value, without declaring a Custom Element

Lesleylesli