What is the current behavior?

GitHub Issue Number: #6269

When using onSlotchange event listeners on <slot> elements in scoped components, the application crashes with:

TypeError: el.addEventListener is not a function

This occurs because in scoped components, Stencil uses a slot polyfill that replaces <slot> elements with text/comment nodes (since native shadow DOM is not used). These nodes don't have native addEventListener methods, causing runtime errors when the framework attempts to attach event listeners.

What is the new behavior?

• onSlotchange event listeners now work correctly on <slot> elements in scoped components
• The slot polyfill now includes custom addEventListener, removeEventListener, and dispatchEvent methods for polyfilled slot nodes
• Event listeners are attached without errors and function as expected
• slotchange events can be dispatched and handled properly
• The fix maintains backward compatibility and doesn't affect shadow DOM components

Technical Details:

• Enhanced patchSlotNode() to add event listener polyfill methods to slot reference nodes
• Fixed timing issue by patching slot nodes immediately after creation, before event listener attachment
• Added defensive checks to prevent overwriting existing methods or double-patching

Documentation

No documentation changes required - this restores expected functionality for existing APIs.

Does this introduce a breaking change?

• Yes
• No

This is a bug fix that restores expected functionality. No migration is required.

Testing

Unit Tests Added:

• ✅ Test that components with onSlotchange render without errors
• ✅ Test that slotchange events are properly dispatched and handled
• ✅ Test that event handlers can be called multiple times
• ✅ Test that component state updates correctly when events fire
• ✅ End-to-end verification of the event listener polyfill functionality

Manual Testing:

• ✅ Verified the reproduction case from issue bug: TypeError: el.addEventListener is not a function in Stencil Core #6269 now works
• ✅ Confirmed existing scoped component functionality remains unaffected
• ✅ Tested that shadow DOM components continue to work as expected

Test Command:

npm run test.jest -- src/runtime/test/scoped.spec.tsx

All tests pass with comprehensive coverage of the event listener polyfill.

Other information

Before this fix:

// This would crash with "addEventListener is not a function"
@Component({ tag: 'my-component', scoped: true })
class MyComponent {
  render() {
    return <slot onSlotchange={this.handleSlotChange}></slot>;
  }
}

After this fix:

// This now works correctly
@Component({ tag: 'my-component', scoped: true })  
class MyComponent {
  handleSlotChange = (event: Event) => {
    // Event handler executes properly
    console.log('Slot content changed!', event);
  };
  
  render() {
    return <slot onSlotchange={this.handleSlotChange}></slot>;
  }
}

Key Files Modified:

• src/runtime/slot-polyfill-utils.ts - Added event listener polyfill
• src/runtime/vdom/vdom-render.ts - Fixed timing of slot patching
• src/runtime/test/scoped.spec.tsx - Added comprehensive tests

This fix ensures that scoped components have feature parity with shadow DOM components for slot event handling.