OS-jacobbell · GitHub

resolves #30279 resolves #30359

What is the current behavior?

While Ionic's stencil.config.ts sets experimentalSlotFixes: true, the fixes never get applied at runtime. Ionic is using an external runtime, so Ionic components import defineCustomElement from @stencil/core/internal/client at runtime and this code has no awareness of the project's stencil configuration.

This leads to a NotFoundError (Failed to execute 'removeChild' on 'Node') when filtering or dynamically removing radios in an ion-radio-group. The error occurs because ion-radio-group wraps its slotted content in an internal <div>.

What is the new behavior?

By setting externalRuntime: false, Stencil generates a project-specific file with defineCustomElement that components import. This file has the project's build settings baked in, correctly applying slot fixes.

Additionally, the internal wrapper <div> around the slotted content in ion-radio-group is removed. With slot fixes correctly applied and the wrapper removed, radios can be filtered or dynamically removed without triggering NotFoundError or DOMExceptions.

Does this introduce a breaking change?

  • Yes
  • No

Other information

External Runtime is enabled by default and designed for projects that import Stencil components from multiple sources. This is flawed because those components will not be running with the runtime settings for which they were made.

Read the original on github.com ↗