1. <template></template> is not supported as a root element of a virtual repeat template, because virtualization requires item heights to be calculatable. With <template></template>, there is no easy and performant way to acquire this value.
2. Similar to (1), other template controllers cannot be used in conjunction with virtual-repeat, unlike repeat i.e: built-in template controllers: with, if, replaceable cannot be used with virtual-repeat. You can easily work around this constraint by nesting other template controllers inside the repeated element, with <template></template> element.
For example : app.html
<template>
<h1>${message}</h1>
<div virtual-repeat.for="person of persons">
<template with.bind="person">
${Name}
</template>
</div>
</template>
3. Beware of CSS selector : nth-child and similar selectors. Virtualization requires appropriate removing and inserting visible items, based on scroll position. This means DOM elements order will not stay the same, thus creating unexpected :nth-child CSS selector behavior. To work around this, you can use contextual properties $index, $odd, $even etc... to determine an item position, and apply CSS classes/styles against it, like the following example :
<template>
<div virtual-repeat.for="person of persons" class="${$odd ? 'odd' : 'even'}-row">
${person.name}
</div>
</template>
4. Similar to (3), virtualization requires appropriate removing and inserting visible items, corresponding lifecycle of items view will also be triggered while inserting (bind, attached) or removing (unbind, detached)
