Template replaceable vs slot

1

I just discovered something really interesting. I’d been using an accordion widget that shows and hides content within an element slot. Due to the nature of slot in au1, rendering of slots can not use if.bind and rather must use show.bind which can incur a large performance issue when loading lots of child elements within a long list of accordions.

I just switched a component to use template replacable instead and now the component list renders immediately, with no lag whatsoever!

Based on this, I’d recommend everyone using template with replacable to render parts of content rather than slots . I’m curious what others would have to say on this .

Here’s some sample code:

<template>
    <h3 click.delegate="visible = !visible" class="accordion-toggle">
        <mdc-icon if.bind="visible">arrow_drop_down</mdc-icon>
        <mdc-icon if.bind="!visible">arrow_right</mdc-icon>
        <template replaceable part="heading">
        </template>
    </h3>
    <div if.bind="visible">
        <template replaceable part="content">
            Content
        </template>
    </div>
    <hr />
</template>

export class MdcSimpleAccordion {
    visible = false;
}