Component/slot overlay borders can be misaligned when nested

I'm running into some situations where the problem still exists:

Scenario 1

I tested with this as the slot-containing component

const Slotto = ({
  title = "Has Slots",
  one, 
  two,
  three
}) => {
  return (
    <>
      {/* Text Prop */}
      <h3>{title} </h3>
      {/* Slot */}
      {one}
      {/* Slot */}
      {two}
      {/* Slot */}
      {three}
    </>
  );
};

And the outline is only around the <h3>, not the entire component including the slots

Scenario 2

Largely the same component as above, but change

      <h3>{title} </h3>

to {title}

In this use case, there is no outline or nametag at all

Scenario 3

Take the component from scenario 2 but replace the fragment with a div, and it works great

I've just seen there was a collision when I added the file when updating the IS. So adding the files again just in case.

If the fragment issues from #4 are out of scope, those can get their own issue. I went through this solution with the steps to reproduce and it definitely fixes the issue that I can now easily reproduce on 0.x

I've created a follow up 🐛 Investigate the use of React fragments in JS components Active in response to the issue with React fragments mentioned in #4.