Stencil version:

 @stencil/core@1.8.11

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:
We have a few "design components" which provide nothing more but a default slot and some styling. Nesting more than one such component causes issues when the consuming component has to update due to State/Prop changes. The child nodes inside the wrapper component will get removed from the DOM and then re-added, instead of getting updated. This causes issues especially when trying to use CSS transitions: instead of updating the classList of an element, the whole element gets removed and added, and thus the transition will not get triggered.

This issue does not happen when native shadow DOM is enabled for the components, but only when using the slot polyfill. Unfortunately we still have to support browser that do not support native shadow DOM

Expected behavior:
DOM nodes inside nested slots should get updated instead of getting removed completely from the DOM and re-added.

Steps to reproduce:

A full example that reproduces the issues can be found here:
https://github.com/simonvizzini/stenciljs-slot-bug-example

It uses a DOM MutationObserver to visualize the issue. The first example is using only a single wrapper component and it works as expected, no DOM mutations are logged and the background transition works fine. The second example uses two nested wrapper components and will log DOM mutations when increasing the counter. Inspecting the logged mutations will reveal that stencil is removing and then adding DOM nodes, thus breaking the CSS transition.

Related code:

// First wrapper component
@Component({
  tag: "my-wrapper-one",
  styleUrl: "wrapper-one.css"
})
export class WrapperOne {
  render() {
    return (
      <Host>
        <slot></slot>
      </Host>
    );
  }
}

// Second wrapper component, which uses 'my-wrapper-one' internally
@Component({
  tag: "my-wrapper-two",
  styleUrl: "wrapper-two.css"
})
export class WrapperTwo {
  render() {
    return (
      <Host>
        <my-wrapper-one>
          <slot></slot>
        </my-wrapper-one>
      </Host>
    );
  }
}

// Using 'my-wrapper-one' is fine, but with 'my-wrapper-two' the transition doesn't work anymore
@Component({
  tag: "my-component",
  styleUrl: "my-component.css"
})
export class MyComponent {
  @State() count: number = 0;
  private increase = () => {
    this.count += 1;
  };

  render() {
    const yellowBg = this.count % 2 === 0;

    return (
      <div>
        <button type="button" onClick={this.increase}>
          Increase
        </button>
        <my-wrapper-two>
          <div class={{ content: true, alternate: yellowBg }}>
            Count: (<span>{this.count}</span>)
          </div>
        </my-wrapper-two>
      </div>
    );
  }
}

Other information: