Lwc: dispatchEvent not working

[juvian]

Not sure which is the right repo to report this, but using dispatchEvent on an element which extends another element instead of LightningElement, doesn't work when using lightning out.

Custom element code:

import LightningCombobox from 'lightning/combobox';

export default class LwcSellerSettings extends LightningCombobox {
    renderedCallback() {
        if (!this.initialized) this.initialize();
    }

    initialize() {
        this.initialized = true;
        try {
            this.dispatchEvent(new Event("change"), {bubbles: true})
        } catch(e) {
            console.log(e)
        }
    }
}

Visualforce code:

$Lightning.createComponent("prefix:lwcSellerSettings", 
                        {},
                        "body",
                        console.log
            );

Result:

If I extend LightningElement instead, it works. Also both cases work in local dev server

[caridy]

just a couple of general notes:

• you should not use new Event, use new CustomEvent instead.
• dispatchEvent() method expects a single argument (the event), that second argument is not for the dispatchEvent, it is for the event constructor.

As for the issue itself, let me loop some other folks here to see if we can figure what could be happening here. /cc @sfdciuie @garazi

[tomSny]

Having same issue extending LightningDatatable.
const selectedEvent = new CustomEvent("isdirtychange", { detail: { isDirty: this.isDirty }}); this.dispatchEvent(selectedEvent);

[diervo]

Can you give us a repro case on the playground?

[juvian]

It works on playground/local server, its when using lightning out when it does not

[caridy]

uff, that's probably another conflict with the host page's polyfills! I will recommend to log a case to get the proper investigation (this will need to debug the app live most likely to see what's the problematic polyfill).

[juvian]

Do you mean log a case to salesforce support? I see several things working differently with lightning out, and unlike this one which is a clear bug, some makes me wonder if its intentional or not.

[caridy]

I'm not very familiar with the differences that lightning-out might carry out, but we have seen tickets about conflicting polyfills, which cause some errors in LWC when running in lightning out. That's why I recommend to open a case to salesforce support.

[jdkgabri]

I have created an stack exchane question about the same issue. I will post any update here as well just in case it helps: https://salesforce.stackexchange.com/posts/326958/edit

[juvian]

@jdkgabri I opened a case on salesforce at the time, this was the response:

I have received an update from the T-3 team that extending another component aside from LightningElement is not currently supported in LWC's due to Lightning Locker Service preventing the extension.

This is currently how the framework is designed. But the product team has taken into consideration how to make component extension more flexible in the future.

Unfortunately, we do not have an ETA or details on when it would be implemented.

[jdkgabri]

Thank you very much for your answer, it was drivin me crazy for a few days. That is a bit missguiding from their side though, since in order to use custom data types they suggest here to do exactly what they told you that was not supported:

Creating Custom Data Types
Create your own data types if you want to implement a custom cell, such as a delete row button or an image, or even a custom number display. Here's how you can create custom data types.

_Extend the LightningDatatable class and define your custom types._
Create your templates to override the default.
Let's take a look at how we create a delete row button that appears on a column on each row. This button deletes the row and dispatches a custom event to signal the deletion.

Anyway thanks a lot for your reply, looking forward to see this working in the future.