Stencil version:

 @stencil/core@1.8.0

I'm submitting a:
[X] bug report
[X] feature request
[ ] support request

Current behavior:
Using a stencil component with slots doesn't work correctly in React on IE11.

The fallback to scoped approach doesn't work for React because the light-dom elements are moved and React gets confused.

To demonstrate, I created https://umdjm.github.io/StencilFallbackDemo/, which is adapted from the React in One Minute Demo.

On IE11, when you click "Like" the Stencil component fails to render with the template:

On Chrome, when you click "Like" the Stencil component shows the slot as expected:

FWIW, this repro worked fine when we created the same Web Component with LitElement.

I think the right fix for this is to support using Shadow Dom polyfills instead of the fallback to scoped approach.

We tried to load the ShadowDom polyfills ourselves, but ran into issues with CSS selectors. The scoped CSS rewrites don't happen when the polyfills exist. Stencil should provide us with a way to enable ShadowDom polyfills correctly so that slots and CSS work well.

Steps to reproduce:

1. Create a stencil component that has a slot
2. Fix the fact that IE11 doesn't call render when children change by adding a mutation observer - see Slot Changes Re-Rendered in Wrong Location on IE11/Edge #2004 (comment)
3. Use that component in a React App

Related code:

Stencil Component:

  render() {
    return <div>
      HEADER

      <br/>

      SLOT (
        <slot />
      )

      <br/>
      FOOTER
    </div>;
  }

React App:

          <my-component>
            {this.state.liked
              ? <p>Button was clicked!</p>
              : "Click the button"
            }
          </my-component>