Slot CRUD does not work properly when shadow is false

[chenyulun]

Stencil version:

 @stencil/core@2.5.2

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:

Slot increase delete add update when shadow is false does not work properly

1. When there is no slot inside Web Components, the user passes the slot to be present, but if shadow
   Is not displayed when true

@Component({
  tag: 'pui-example',
  shadow: false,
})
export class Example implements ComponentInterface {
render() {return (<Host></Host>)}
}

The wrong presentation flattened DOM:

<pui-example class="hydrated"><!----><div><span>outside default slot</span></div></pui-example>

Expected behavior flattened DOM

<pui-example class="hydrated"><!----><div hidden=""><span>outside default slot</span></div></pui-example>

2. Initialize the hidden slot, pass it to the slot node when used, and display the slot inside the component with parameters that can correctly process the slot to its actual location. However, if the internal slot of the component is hidden here, the external slot node disappears and the external slot node should be moved back to its original position for hiding

3. When you outsource an incoming slot and receive it internally, delete the outsourced slot. The hidden property of the internal slot-fb is not removed

When shadow is true, the browser will handle it just fine

Expected behavior:

Slot increase, delete and update when shadow is false will work normally

Steps to reproduce:

Related code:

import { Component, ComponentInterface, Prop, Host } from '@stencil/core';
@Component({
  tag: 'pui-example',
  shadow: false,
})
export class Example implements ComponentInterface {
  /**
   * Whether or not to show slot
  */
  @Prop() enabled = false;
  render(): VNode {
    return (
      <Host>
        {this.enabled && (
          <div data-txt="slot wrapper">
            <slot>
              <span>fallback default slot</span>
            </slot>
          </div>
        )}
      </Host>
    );
  }
}

DOM nodes to use and display：

// Use the code(Vue) showSlot = true
<pui-example>
  <div v-if="showSlot" data-txt="outside default slot">
    <span>outside default slot</span>
  </div>
</pui-example>
// flattened DOM: ====》Incoming slot should be hidden
<pui-example class="hydrated">
  <!---->
  <div data-txt="outside default slot">
    <span>outside default slot</span>
  </div>
</pui-example>

When the following statement is executed：

document.getElementsByTagName('pui-example')[0].enabled = true

This is normal as shown below

<pui-example class="hydrated"><!----><div data-txt="slot wrapper"><slot-fb hidden=""><span>fallback default slot</span></slot-fb><div data-txt="outside default slot"><span>outside default slot</span></div></div></pui-example>

When the following statement is executed：

document.getElementsByTagName('pui-example')[0].enabled = false

Incoming slot nodes are deleted： ====》It should be moved back to its original position and then hidden

<pui-example class="hydrated"><!----></pui-example>

Other information:

[christian-bromann]

A fix for this issue was released in v4.8.2. Thanks for reporting!