DOM Elements

Bemtv offers helper functions to make it easier to manage and manipulate a DOM element.

ElManager

All functions for getting elements from the DOM at some point return an instance, which makes it easier to manage the element.

ElManager.el

Allows access to the real DOM element.

ElManager.css()

Allows you to add CSS-in-JS to the element.

This method can be called even before the element is added to the DOM, the style will be scheduled and applied as soon as the element is available.

ElManager.anyDOMEvent()

You can add any event from the instance, it works exactly the same as adding events from the component instance:

ElManager.click$(()=>{})

useElManager()

Allows you to bind an instance to handle a real DOM element to an element in the template:

import { _, useElManager } from "bemtv";

const { onMount, template } = _`Hey`();

const elManagerFn = useElManager();

onMount(() => {
  const elManager = elInstFn();
});

template`h1[ ${elInstFn} Hey!]`;

When calling the useElementInst(), you will have as return another function that must be inserted the tag of the element in the template.

This function has a “key” property that bemtv automatically accesses when the template is defined as a TemplateStringsArray.

When calling the function, you will get an instance as return that facilitates the management of the DOM element.

The function should only be called on callbacks that the component can handle, so that it returns a handling instance of the element correctly even if the component is used multiple times:

useFirstElManager()

This function directly accesses the first element of the component and returns an instance to manage it:

import { _, useFirstElManager } from "bemtv";

const { onMount, template } = _`Hey`();

onMount(() => {
  const elManager = useFirstElManager();
});

template`h1[ Hey!]`;

This function should only be called on callbacks that the component can handle, so that it returns a handling instance of the element correctly even if the component is used multiple times:

createElManager()

This function creates an instance to manage the element from a selector or element:

import { createElManager } from "bemtv";

const elManager = createElManager("#app");