Prerequisites

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

Stencil Version

3.0.0-beta.1

Current Behavior

When the following component is defined:

import { h, Component, ComponentInterface, Element, Host } from '@stencil/core';

@Component({
  tag: 'custom-element-button',
  styleUrl: 'button.scss',
  shadow: false,
  scoped: false,
})
export class Button implements ComponentInterface {
  @Element() host;

  render(): HTMLElement {
    return (
      <Host class="test-button">
        <button>
          <div class="content-wrapper">
            <span class="prefix">
              <slot name="prefix" />
            </span>
            <slot />
            <slot name="suffix" />
          </div>
        </button>
      </Host>
    );
  }
}

When modifying default slot content using javascript:

<custom-element-button>Button</custom-element-button>

document.querySelector('custom-element-button').innerText = "newButtonText"

All the markup inside disappears and only the text remains.

Expected Behavior

Same as with shadow DOM

System Info

N/A

not relevant, happening in multiple OS's, browsers, and node versions

Steps to Reproduce

Download the linked repository, install, start the project, and type into the input element

Code Reproduction URL

https://github.com/oscargm/stencil-slot-problem

Additional Information

In the reporduction repository you'll find a demo using components with:

• shadowDOM (works fine)
• scopedCSS without shadowDOM (issue reproducible)
• neither scopedCSS or shadowDOM (issue reproducible)

If this is the intended behaviour I'd like to know how to avoid this issue.

I found out that adding a span like htis:

<scoped-css-button class="button with-children-element">
  <span>Button</span>
</scoped-css-button>

and changing the text of the span everything works fine, or even with the prefix/suffix named slots changing the textContent or innerText it works fine.