What is the current behavior?

Stencil's current textContent patch for scoped elements only deals with a component's default slot. However, the team has recently agreed that our scoped component behavior should mimic a shadow component as closely as possible.

Fixes: #3977

What is the new behavior?

The textContent patch now behaves like the native implementation for an element with a Shadow Root. The getter will return the combined textContent of all child nodes that are located in slot references. And the setter will replace all content within slot reference nodes with a single text node in the default slot reference (if one exists).

Does this introduce a breaking change?

• Yes
• No

Testing

Manual testing

1. Create new component starter
2. Enable extras.experimentalSlotFixes in Stencil config
3. Update my-component to the following:

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  scoped: true,
})
export class MyComponent {
  render(): HTMLElement {
    return (
      <Host>
        <button>
          <div class="content-wrapper">
            <span class="prefix">
              <slot name="prefix" />
            </span>
            <slot />
            <slot name="suffix" />
          </div>
        </button>
      </Host>
    );
  }
}

4. Update index.html to have the following body:

          <my-component>
            <span slot="prefix">Prefix</span>
            <p>Button</p>
            <span slot="suffix">Suffix</span>
          </my-component>

5. Run npm start
6. Execute the textContent getter/setter on the element from browser dev tools. Notice that it will only ever change the "Button" node in the default slot
7. Install a build of this branch
8. Execute the textContent getter/setter on the element from browser dev tools. Notice that it will now return the value of all slotted content and will replace all nodes when using the setter

Automated testing
Update a few existing tests to account for whitespace differences in return value. Added new e2e tests to verify behavior for scoped components.

Other information

Only available with the experimentalSlotFixes extra flag enabled in a project's Stencil config.

This does not include a patch for innerText. That method is trickier to patch to correctly get whitespace and line break formatting.