Прямое расширение элемента HTML с помощью настраиваемого метода

Question

Я хочу прикрепить функцию к определенному элементу c html, чтобы, если позже я вытащу этот элемент с querySelector, я смогу запустить эту функцию как метод для этого элемента.

interface Foo extends HTMLDivElement {
    showBar: Function;
};

function createFooBar(node: HTMLElement) {
    const foo = document.createElement('div');
    foo.classList.add('foo');
    const bar = document.createElement('div');
    bar.classList.add('bar');
    bar.style = "display: none;";
    node.appendChild(foo);
    node.appendChild(bar);

    //Here I want to add a function to the element
    foo.showBar = (thing: string) => {
        bar.innerText = thing;
        bar.style = "";
    };
}

for (let i=0; i<10; i++) {
    createFooBar(document.querySelector('body'));
}

const foos: NodeListOf<Foo> = document.querySelectorAll('.foo');
for (let i=0; i<foos.length; i++) {
    foos[i].showBar(i.toString());
}

В этом коде каждый экземпляр bar связан с экземпляром foo во время функции createFooBar. Когда foo.showBar(thing) вызывается позже, он знает, какую полосу отображать для каждого foo. В моем редакторе кода я получаю следующую ошибку:

TS2339: Property 'showBar' does not exist on type 'HTMLDivElement'

Имеет смысл. Это подталкивает меня к созданию class для этого типа элемента, который имеет showBar() в качестве метода. Из HTML spe c кажется, что можно создать собственный элемент, но я не могу помочь, но чувствую, что в этом нет необходимости и что должен быть какой-то способ прикрепить функцию к элементам, как при использовании addEventListener.

Есть ли способ прикрепить функцию к элементу html в DOM без создания настраиваемого элемента html?