repeat via attributes

[JoernT]

repeat attributes

fx-repeat element is fine but does not work out in some use cases.

Consider this:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Using fx-repeat as is would force:

<ul>
    <fx-repeat ref="items">
        <template>
            <li>{.}</li>
        </template>
    </fx-repeat>
</ul>

Not at all want you want - breaks content-model of <ul> and may even break styling or require workarounds.

So in consequence what we'll need is:

<ul data-ref="items">
    <template>
        <li>{.}</li>
    </template>
</ul>

Possible implementation

At initial refresh the fx-form:

• querySelectorAll('[data-ref]')
• create fx-repeat for each of them like so:

<fx-repeat ref="items">
::shadowDOM <template>...</template 
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
<ul>
</fx-repeat>

fx-repeat would become an invisible wrapper around the actual repeated element and:

• move data-ref to fx-repeat/@ref
• move <template> to shadowDOM of repeat
• unroll items

Same principle should work for tables or other similar structures.

[timathom]

Would be really nice to be able to use fx-repeat with tables :)

[JoernT]

one question remains here: must/should 'table repeats' be nestable? It turns out to be significantly more complex to realize nested structures though nesting of fx-repeat elements inside of tables would do fine.