Question regarding slots as childs of divs

[hybridherbst]

Description

For a particular usecase we're having, we require an AR Button area such as this:

(the button has a footnote specifying some details, and a link for privacy information).

I'm unclear however how to build that with model-viewer; I first tried wrapping the ar-button slot in a div and also putting that information in the div (which seemed like the right way, structurally), but then the slot is not detected (I get double buttons). From reading a bit about web component slots that might be by design?

I currently ended up putting all the elements into the slot button, but that requires really nasty CSS and also semantically doesn't feel right (a link in a button). Is there a better way to do this?

Does not work (slot not detected, regular AR button shows up):

<div class="ar-entry-area">
    <button slot="ar-button" id="button-enter-ar">
        <span>View In AR*</span>
    </button>
    <p>*Some Text.</p>
    <p><a href="">More Info</a></p>
</div>

Workaround (with hacky CSS, semantics are bad)

<button slot="ar-button" id="button-enter-ar" class="ar-entry-area">
    <div class="button">
        <span>View In AR*</span>
    </div>

    <p>*Some Text.</p>
    <p><a href="">More Info</a></p>
</button>

[elalish]

Could you paste the HTML for the two cases or Glitch links so I can see what you mean?

[hybridherbst]

Updated the question with the HTML!

[elalish]

That's a good question; I definitely think the slot has to be the parent of everything else you want included. Not sure if there's a cleaner way to set up the CSS for this one. Any thoughts @cdata?