useHost и доступ к элементу

Библиотека Atomico предоставляет удобный способ работы с веб-компонентами и реактивным состоянием через хуки, один из которых — useHost. Этот хук используется для получения доступа к корневому элементу компонента и его свойствам, событиям или DOM-операциям, что позволяет более гибко управлять компонентом на уровне его хоста.

Основы useHost

useHost возвращает объект типа HostElement, который соответствует DOM-элементу, на котором монтируется компонент. Этот объект можно использовать для:

Чтения и записи атрибутов и свойств элемента.
Регистрации слушателей событий.
Получения ссылки на DOM для измерений или управления фокусом.

Простейший пример использования:

import { c, useHost, html } from "atomico";

function MyComponent() {
    const host = useHost();

    const handleClick = () => {
        host.setAttribute("clicked", "true");
        console.log(host.clientWidth, host.clientHeight);
    };

    return html`
        <button oncl ick=${handleClick}>Нажми меня</button>
    `;
}

MyComponent.props = {};
customElements.define("my-component", c(MyComponent));

В этом примере host — это сам элемент <my-component>. Через него можно менять атрибуты, измерять размеры и работать с другими свойствами DOM.

Доступ к атрибутам и свойствам элемента

Использование useHost упрощает работу с состоянием элемента, включая его атрибуты и свойства.

const host = useHost();

// Чтение атрибута
const mode = host.getAttribute("mode");

// Запись атрибута
host.setAttribute("mode", "dark");

// Работа с собственным свойством
host.value = 42;
console.log(host.value);

Особенность Atomico в том, что любые изменения через host не нарушают реактивность, если свойства компонента синхронизированы с props.

Работа с событиями на хосте

useHost позволяет подписываться на события самого компонента или дочерних элементов.

import { useEffect } from "atomico";

function ClickTracker() {
    const host = useHost();

    useEffect(() => {
        const handleMouseEnter = () => console.log("Наведение на компонент");
        host.addEventListener("mouseenter", handleMouseEnter);
        return () => host.removeEventListener("mouseenter", handleMouseEnter);
    }, []);

    return html`<div>Наведи на меня</div>`;
}

Использование useEffect вместе с useHost обеспечивает автоматическое удаление слушателей при размонтировании компонента, предотвращая утечки памяти.

Управление фокусом и доступ к DOM

Хук useHost позволяет напрямую работать с DOM-методами, такими как focus, blur, scrollIntoView. Это особенно важно для компонентов, которые требуют управления состоянием или навигации через клавиатуру.

function FocusButton() {
    const host = useHost();

    const focusHost = () => host.focus();

    return html`<button oncl ick=${focusHost}>Фокус на компонент</button>`;
}

Интеграция с реактивными хуками

useHost отлично сочетается с useState и useEffect, что позволяет строить сложные реакции на изменения атрибутов или состояний DOM.

import { useState, useEffect } from "atomico";

function ResizeWatcher() {
    const host = useHost();
    const [size, setSize] = useState({ width: 0, height: 0 });

    useEffect(() => {
        const updateSize = () => setSize({ width: host.clientWidth, height: host.clientHeight });
        updateSize();
        window.addEventListener("resize", updateSize);
        return () => window.removeEventListener("resize", updateSize);
    }, []);

    return html`<div>Ширина: ${size.width}, Высота: ${size.height}</div>`;
}

Здесь useHost обеспечивает прямой доступ к элементу, а реактивное состояние обновляется при изменении размеров окна, демонстрируя гибкость интеграции DOM и реактивных хуков.