Building table rows with child components breaks table striping

Using a parent table component and creating table rows out of child components results in alternating table_row and script tags like so:

<tr unicorn:id="3gyuTizE:payment-row:56" unicorn:name="payment-row" unicorn:key="56" unicorn:checksum="GnYyQM78">
...
</tr>
<script type="module">if (typeof Unicorn === 'undefined') { console.error('Unicorn is missing. Do you need {% load unicorn %} or {% unicorn-scripts %}?') } else { Unicorn.componentInit({"id":"3gyuTizE:payment-row:56",...}</script>

This breaks table striping as implemented in many css frameworks (tested with Bulma, Materialize, Picnic and Siimple). Using plain css as below also does not work properly b/c of the additional script tags after every row:

tr:nth-child(even) {
    background-color: #F3F4F6;
}
tr:nth-child(odd) {
    background-color: #aeb2bb;
} 

[cleonello]

Thanks! Just updated and seems to work as expected!

[cleonello]

Awesome! Yes, it would solve the issue. I also agree that it would be cleaner not to output a script tag for each child component.

BTW, great work on django-unicorn! I’m excited to try it out on a couple new projects. Thanks for the hard work!