element-vir/dist/declarative-element/directives/on-dom-rendered.directive.js

Heroic. Reactive. Declarative. Type safe. Web components without compromise.

import { directive, Directive } from '../../lit-exports/all-lit-exports.js';
import { assertIsElementPartInfo } from './directive-helpers.js';
const directiveName = 'onDomRendered';
/**
 * A directive that fires its listener each time the element that it's attached to is rendered.
 *
 * @category Directives
 * @example
 *
 * ```ts
 * import {html, defineElement, onDomRendered} from 'element-vir';
 *
 * const MyElement = defineElement()({
 *     tagName: 'my-element',
 *     render() {
 *         return html`
 *             <div
 *                 ${onDomRendered((element) => {
 *                     console.log('rendered!', element);
 *                 })}
 *             >
 *                 Some div
 *             </div>
 *         `;
 *     },
 * });
 * ```
 */
export const onDomRendered = directive(class extends Directive {
    constructor(partInfo) {
        super(partInfo);
        assertIsElementPartInfo(partInfo, directiveName);
    }
    update(partInfo, [callback]) {
        assertIsElementPartInfo(partInfo, directiveName);
        const element = partInfo.element;
        // use `requestAnimationFrame` here so it can fire property changes outside of a render loop
        window.requestAnimationFrame(() => callback(element));
        return this.render(callback);
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    render(callback) {
        return undefined;
    }
});