CODEWITHSUNDEEP
web-componentlit-elementlitui5-webcomponents
c0r3
c0r3

Reputation: 23

LitElement: Call a Method from external web component

I'm very new to Lit and Web Components. I hope you can help me.

I wrote the following Element:

import {html, LitElement, PropertyValues} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import "@ui5/webcomponents/dist/Toast.js";
import {connect} from "pwa-helpers";
import {store} from "../redux/store.js";
import {Toast} from "../_interface/toast.js";

@customElement('md-toast-view')
export class ToastView extends connect(store)(LitElement) {

  @property()
  private toast: Toast;

  @property()
  private readonly defaultMessage: string =  "";

  private readonly componentID: string = "md-toast"

  constructor() {
    super();
    this.toast = {
      message: this.defaultMessage
    }
  }

  stateChanged(state: any) {
    this.toast = state.toast.toast;
  }

  render() {
    if (this.toast.message === "") {
      console.log("Message is null")
      return html``;
    }

    return html`
      <ui5-toast id="${this.componentID}">${this.toast.message}</ui5-toast>
    `;
  }


  protected updated(_changedProperties: PropertyValues) {
    if (_changedProperties.has('toast')){
      console.log("Toast has updated");
      const element = this.renderRoot.querySelector('#'+this.componentID);
      console.log(element)
      if (element !== null){
        element.dispatchEvent(new CustomEvent('show'))
      }
    }
  }
}

The idea is that when a message is stored in the redux store that a toast is given. The toast itself is from the following website: https://sap.github.io/ui5-webcomponents/playground/components/Toast/

As you can see, the ui5 component has a public method "show", which must be triggered.

Currently, I've gotten as far as triggering the updated method from my LitElement and getting the UI5 component. But somehow, the "dispatchEvent" method does not trigger the ui5 component.

The console output looks like this:

enter image description here

Thank you for helping me

Upvotes: 1

Views: 1309

Answers (1)

connexo
connexo

Reputation: 56754

As you can see, the ui5 component has a public method "show", which must be triggered called.

show as you mentioned is a method. Just call it:

element.show();

No need to dispatch an event on the component. Components are meant to communicate changes to their internal state via events upwards; to actively trigger state changes from the outside, use the component's API.

Upvotes: 2

Related Questions