bug: Whitespace between inline elements is removed during hydration when HTML comes from CMS or slot content

[momenelkamri]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.36.3

Current Behavior

When hydrating HTML that contains inline elements separated by normal spaces (e.g. Chocolate bonbon), the spaces between inline elements are removed after hydration.

This happens especially when:

The HTML is slotted content (not rendered inside the component itself), or

The HTML is external content, e.g. coming from a CMS WYSIWYG field.

Example input:

<my-component>
  <i>Chocolate</i> <a href="#">bonbon</a> <strong>lollipop</strong>
</my-component>

Hydrated output:

<my-component>
  <i>Chocolate</i><a href="#">bonbon</a><strong>lollipop</strong>
</my-component>

Rendered result: Chocolatebonbonlollipop

Setting prettyHtml: true prevents this, but introduces unwanted extra spaces elsewhere. Using   or   does not solve the issue — they still get stripped during hydration.

Expected Behavior

Stencil should preserve existing whitespace between inline elements during hydration, especially for slotted or externally provided HTML content (e.g. from a CMS). Hydration should not alter valid HTML formatting that affects visible output.

System Info

node v22.20.0
stenciljs version: 4.36.3

Steps to Reproduce

Create a simple Stencil component with a slot:

@Component({
  tag: 'my-component',
  shadow: true
})
export class MyComponent {
  render() {
    return <slot></slot>;
  }
}

Render it with inline elements separated by spaces:

<my-component>
  <i>Chocolate</i> <a href="#">bonbon</a> <strong>lollipop</strong>
</my-component>

Run @stencil/hydrate to hydrate the HTML.

Observe that the space between elements disappears in the hydrated output.

---

A minimal reproduction is provided in this Codesandbox: https://codesandbox.io/p/github/johnjenkins/stencil-start-dwbrl2st

or this github repo: https://github.com/momenelkamri/stencil-hydrate-whitespace-bug

Code Reproduction URL

https://github.com/momenelkamri/stencil-hydrate-whitespace-bug

Additional Information

This issue was discussed on the Stencil Discord with @jjenks and @Jagget. They confirmed that whitespace between inline elements is stripped during hydration, especially for nodes not directly tracked by Stencil (e.g. slotted or external HTML).

In my use case, the HTML comes from a CMS WYSIWYG input, so I don’t have control over the markup. Workarounds like using  ,  , or inserting inline elements are error-prone and not reliable.

Therefore, this behavior seems unintended and should ideally be handled more gracefully in the hydration parser.