Component element attribute?

Hello Ben! Thank you for the great work on Sprig. 🏆

Question

I wanted to ask if it is possible to set another HTML element than a <div> for the (surrounding) Sprig component element?

Additional context

I want to use a regular old <ol> list and add list item elements (load more) to the end of it. The Sprig div is already there, it is just not the right parent element for my list items. Adding an ordered list element breaks the list, as the div ends up inside the <ol> list element.

Is there a different (better) semantic and accessible approach to have the component div, then the ordered list item followed by the list items?

At the end I want to combine it with a filter component as well. The load more and filter component working together. I have it work, but the HTML is not right at the moment.

Example

From this:

<div id="component-tblode" class="sprig-component">
    <ol class="listing">
       <li class="list-element">
            Lorem ipsum dolor sit amet…
       </li>
    </ol>
</div>

to this:

<ol id="component-tblode" class="sprig-component listing">
   <li class="list-element">
        Lorem ipsum dolor sit amet…
   </li>
</ol>

using something like this:

{{ sprig('_components/listing', {}, {
    '_element': 'ol',
    'id': 'listing-component',
    …
}) }}

[ghost]

@bencroker thank you. 🏆

It works, but you are right. It’s a bit “messy” for such a use case, hence my question to make the <div> the <ol> in the first place, so that there would not be an extra element to take care of like in this case. I can understand though that you are not very keen on making the element an available attribute. In htmx it would not even be a problem, as you put the htmx attributes to closest relevant element.

[bencroker]

Normally yes, however if the button is inside a sprig.isInclude condition, as it is above, then it will be rendered once and only once.

This works for me provided a Javascript variable called offset exists:

s-vars="offset: offset += {{ limit }}"