element-vir - v26.15.1
    Preparing search index...

    Variable keyedCacheConst

    keyedCache: (
        key: PropertyKey,
        value: unknown,
    ) => DirectiveResult<typeof KeyedCacheDirective> = ...

    Caches rendered DOM by a user-provided key. When the key changes, the current DOM is stored and the previously cached DOM for the new key is restored (if any). This preserves DOM state (such as typed input values) across key switches.

    Unlike cache, which distinguishes templates by their structure, keyedCache distinguishes them by an arbitrary key, allowing multiple instances of the same template to maintain independent DOM state.

    Note: cached DOM is stored in a Map keyed by the provided key. Entries are not automatically garbage collected, so avoid using dynamically generated keys that are never reused.

    Type Declaration

    import {html, defineElement, keyedCache} from 'element-vir';

    const MyElement = defineElement()({
        tagName: 'my-element',
        stateInit: {
            activeTab: 'tab-a',
        },
        render({state}) {
            return html`
                <div>
                    ${keyedCache(
                        state.activeTab,
                        html`
                            <input placeholder="Type here..." />
                        `,
                    )}
                </div>
            `;
        },
    });

    Settings

    Member Visibility