[@astrojs/lit] Fix slotted content

[ba55ie]

Changes

• This fixes [@astrojs/lit] Slotted content is wrapped in <astro-slot> elements which breaks native slot functionality #5475.
• It reverts the injected <astro-slot> components.
• And restores the slot="name" attributes.

I use parse5 to parse the HTML string into a Fragment and then add the missing named slots. This is safer than using regex, but if there's a better parser, don't hesitate to change it.

// Before
<my-element>
    <astro-slot slot="header">
        <h1>Header</h1>
    </astro-slot>

    <astro-slot>
        <p>Content</p>
        <p>Some more content</p>
    </astro-slot>

    <astro-slot slot="footer">
        <small>Legal stuff</small>
        <small>© 2023</small>
    </astro-slot>
</my-element>

// After
<my-element>
    <h1 slot="header">Header</h1>

    <p>Content</p>
    <p>Some more content</p>

    <small slot="footer">Legal stuff</small>
    <small slot="footer">© 2023</small>
</my-element>

Testing

• Tests have been added for nested slotted HTML and Web Components.
• The code has been tested in my own projects.

Docs

The docs do not need updating.

[changeset-bot]

🦋 Changeset detected

Latest commit: a1b10b9

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[matthewp]

Thanks!