element-vir/dist/declarative-element/directives/create-attribute-directive.js

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

import { directive, Directive, noChange } from '../../lit-exports/all-lit-exports.js';
import { extractElement } from './directive-helpers.js';
/**
 * Creates a lit directive that used simply for setting attributes on its parent element.
 *
 * @category Internal
 */
export function createAttributeDirective(attributeName) {
    const newDirective = directive(
    /** @internal */
    class extends Directive {
        element;
        constructor(partInfo) {
            super(partInfo);
            this.element = extractElement(partInfo, attributeName);
        }
        render(attributeValue) {
            this.element.setAttribute(attributeName, attributeValue);
            return noChange;
        }
    });
    return {
        /**
         * Creates a string for use with the
         * [`querySelector`](https://developer.mozilla.org/docs/Web/API/Document/querySelector) API
         * that selects this directive's attribute set to the given `attributeValue`.
         */
        attributeSelector(attributeValue) {
            return `[${attributeName}="${attributeValue}"]`;
        },
        /**
         * Instantiates the attribute directive. This must be used on an element inside of an HTML
         * template.
         */
        attributeDirective(attributeValue) {
            return newDirective(attributeValue);
        },
        /** The name of the attribute used in the directive. */
        attributeName,
    };
}