@Listen(slotchange) not triggered

[dellfort]

Stencil version:

 @stencil/core@2.3.0

I'm submitting a:
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
@listen('slotchange') is not triggered when slot content changes

Expected behavior:
@listen('slotchange') is triggered when slot content changes

Steps to reproduce:
Apply a slotchange Listen decorator to a component with slot. Change slotted content.
Apply a slotchange EventListener directly to the slot on omponentDidLoad to see that the event is being fired.
-->

Related code:

    @Listen('slotchange')
    handleSlotChange(evt) {
        console.log('slot changed', evt);
    }

    @Listen('click')
    handleClick(evt) {
        console.log('being clicked', evt);
    }

    componentDidLoad() {
       this.el.shadowRoot.querySelector('slot').addEventListener('slotchange', (evt: any) => {
         console.log('slot changed', evt);
       })
    }

    render() {
        return (
            <Fragment>
                <span>OK</span>
                <slot />
            </Fragment>               
        );
    }

     <button onClick={ ()=> { document.getElementById('date1').innerHTML = "2020-07-05" } }>change</button><br />
     <c-mycomponent id="date1" >2020-06-05</c-mycomponent>

[sean-perkins]

@dellfort I don't believe what you are thinking is a bug, is a feature of the tool. Based on your Fragment element, it appears you are coming from a React context.

Fragment is similar to Host in Stencil (but not an identical representation). As for subscribing to a slot's contents change, there are mechanisms you could use to accomplish this, but I would question what real world implementation would require it so that I can better offer a solution.

If you are truly needing to subscribe to the slot's contents change, a mutation observer would accomplish that need. I personally use this concept to have a translation web component that can automatically translate it's slotted contents, but also warn the developer if the translation key is not available in state.

[anonimusprogramus]

@sean-perkins Is there any example of mentioned mutation observer? Thanks

[MarkChrisLevy]

@anonimusprogramus https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

[sean-perkins]

@anonimusprogramus In our example we loosely have this:

@Component({}) 
export class Example {

    @Element() el!: HTMLElement;

    private observer: MutationObserver;

    componentDidLoad() {
        const slot = this.el.querySelector('slot');
        let textNode: Node;
        if (slot) {
            this.textNode = this.pierceSlots(slot);
        } else {
             this.textNode = this.el.lastChild;
        }
        this.observer = new MutationObserver(mutations => {
            for(let mutation of mutations) {
                 // TODO comparison on the mutation.target based on what is considered a change for your feature
            }
       });
      this.observer.observe(textNode, {
           characterData: true,
           characterDataOldValue: true
      });
    }

    disconnectedCallback() {
        if (this.observer) {
             this.observer.disconnect();
        }
    }

    /**
     * Recursive method to get through nested slots
     *
     * <slot>
     *     <slot>Some text</slot>
     * </slot>
     */
    private pierceSlots(node: Node | HTMLSlotElement) {
        if (node.nodeName === '#text') {
            return node;
        }

        if (node.nodeName.toLowerCase() === 'slot') {
            const nodes = (node as HTMLSlotElement).assignedNodes();

            const testNode = nodes[nodes.length - 1];

            if (testNode != null) {
                if (testNode.nodeName === '#text') {
                    return testNode;
                } else {
                    return this.pierceSlots(testNode);
                }
            }
        }
    }

    render() {
        return <slot />;
    }
}

[anonimusprogramus]

@MarkChrisLevy @sean-perkins thank you!

[dellfort]

The point in my bug report was that @Listen('slotchange') doesn't work.
I appreciate the attempt on providing alternative change detection, but I'd rather ave the listener fixed or an explanation why this would e expected behaviour.

[sean-perkins]

The point in my bug report was that @Listen('slotchange') doesn't work.
I appreciate the attempt on providing alternative change detection, but I'd rather ave the listener fixed or an explanation why this would e expected behaviour.

I believe that slotchange isn't a composed event, which means it doesn't pass through the shadow dom boundary.

You can loosely confirm this by capturing the event like you are inside the shadow root, and then dispatching the event on the host element manually:

this.el.dispatchEvent(new CustomEvent('slotchange', { detail: evt });

Which will be caught in your existing host listener.

[claviska]

I believe that slotchange isn't a composed event, which means it doesn't pass through the shadow dom boundary.

This is correct, it's not composed.

FWIW, I seldom use @Listen and typically listen for slotchange like this:

<slot onSlotchange={this.handleSlotChange} />

[tanner-reits]

Hi all! I'm going to go ahead and close this out as it sounds like the initial problem has been sorted out. If anyone is still running into issues or has questions on how Stencil's @Event() or @Listen() decorators work, please check out the docs or post a question in our Slack!