What is the current behavior?

It is possible for content to not be relocated correctly when it is relocated from a non-shadow to a shadow component if a slot is slotted into another slot and the names are different. A basic example may look something like:

// index.html
<host-cmp>
  <b slot="main-content">main slotted content</b>
  <b slot="secondary-content">secondary slotted content</b>
</host-cmp>

// host.tsx
<div>
  <parent-cmp>
    <slot name="main-content" slot="main-content" />
    <div slot="slotted-content-element">
      <child-cmp>
        <slot name="secondary-content" />
      </child-cmp>
    </div>
  </parent-cmp>
</div>

// parent.tsx
<div>
  <slot name="main-content" />
  <slot name="slotted-content-element" />
</div>

// child.tsx
<div>
  <p>content before</p>
  <slot />
  <p>content after</p>
</div>

In the above example, the "secondary slotted content" text won't render at all since we don't correctly remove the slot attribute for it to render in the default slot in it's final location.

Fixes: #4525

What is the new behavior?

When we move the node under the shadow component, we check the element's slot attribute against the slot ref node to make sure the two slot names match.

Does this introduce a breaking change?

• Yes
• No

Testing

Manual Testing

Install a build of this branch into the reproduction case for the issue (#4525)

Automated Testing

New e2e test added for reproduction case. All other unit & e2e tests continue to pass

Other information

Only available when the experimentalSlotFixes config extras flag is enabled