timo-71

CURLOPT_CUSTOMREQUEST => "PUT"

Можно и for. Просто мне так больше нравится. 

for (var i = 0; i < _nodelist.length; ++i) {
  ...
}

// vs

_nodelist.forEach(
  e=>{}
)

Дело вкуса.

Там только направление. А в итоге - что то типо такого:

document.querySelectorAll('.mbn__shor').forEach (
  e => {
    const a = e.closest('a');
    if (a) {
      const h = e.offsetHeight;
      e.style.marginBottom = `-${h}px`;

      a.addEventListener('mouseover', ev=>{
        e.style.marginBottom = 0;
      });

      a.addEventListener('mouseout', ev=>{
        e.style.marginBottom = `-${h}px`;
      });
  }
});

$ на помойку. Попробуйте пойти по такому пути.

    document.querySelectorAll('.mbn__shor').forEach (
      e => {
        const a = e.querySelector('a');
        if (a) {
            a.addEventListener('mouseover', ev=>{
              console.log('mouseover',
                e, // элемент .mbn__shor
                a, // элемент а в .mbn__shor
                ev, // event
                ev.target.parentNode.previousSibling,
                ev.target.parentNode.previousElementSibling,
                ev.target.parentNode.nextSibling,
                ev.target.parentNode.nextElementSibling,
              );
            });

            a.addEventListener('mouseout', ev=>{
              console.log('mouseout', ev.target.offsetWidth);
            });
        }
      });

А jQuery, да лучше на помойку..

Ну, это пока. А через год может и появится. Вон Ютуб например.

<ytd-rich-grid-media ....>
  <div id="dismissible" class="style-scope ytd-rich-grid-media">
    <ytd-thumbnail ....>
      <yt-img-shadow ....>
        ......
</ytd-rich-grid-media>

Вебкомпоненты хороший и удобный инструмент. В числе прочих..

Логично, что не имея опыта

Понять, почему это не работает как надо, сложно.

Если вернуться к стартпосту

<filter-button img="../static/All.svg" pop-up="Текст" text="Текст" ></filter-button> 
<filter-button><filter-selectable content='["текст", 123]'></filter-selectable>

Могу предположить, что мотив разработчика не в ленивой загрузке, а каких то эвентах  повешенных на эти кастомные элементы. Ну, типа filter-selectable реализует что то типа селекта при изменении которого идет запрос на сервер для выборки подходящих товаров

customElements

Сhrome                  Full support 54
Edge                    Full support 79
Firefox                 Full support 63  
Internet Explorer       No
Opera                   Full support 41
Safari                  Full support 10.1
WebView Android         Full support 54
Chrome Android          Full support 54
Firefox for Android     Full support 63
Opera Android           Full support 41 
Safari on iOS           Full support 10.3
Samsung Internet        Full support 6.0

Сейчас все усложняется. А "специалист" должен обладать определенной квалификацией.

А если она есть, customElements наоборот, упрощает многие вещи. Ну вот, пример. У меня, достаточно продолжительное  время экслуатировался собственный фреймворк, который в числе прочего,  на определенные элементы (data-url) вешает функционал валидации и отправки запроса на сервер.

<input type="text" data-url="/api/search" data-min="3" data-max="128">


let a = document.querySelectorAll('[data-url]');
a.forEach(el=>{        
  axhr.init(el);
});

Что то около 2000 строк кода. Правда там еще модальное окно и уведомление noty. Если xhr запрос возвращает  какой то элемент с data-url,  который тоже должен при определенных условиях отправлять запрос на сервер, то его надо определить и повесить обработчик - лишние телодвижения.

Сейчас перепиливаю на

<xhr-input type="text" data-url="/api/search" data-min="3" data-max="128"></xhr-input>

import { appModal } from "./appmodal.js";
import { appNoty } from "./appnoty.js";
import { xhrInput } from "./xhrinput.js";
import { xhrSelect } from "./xhrselect.js";
import { xhrForm } from "./xhrform.js";

customElements.define('xhr-input', xhrInput);

Четко, прозрачно и просто.  Достаточно посмотреть xhrInput в 70 строк и все  предельно ясно, чем ковырять в 2000 строк кода. Любой новый элемент вставленный в документ, уже имеет все нужные обработчики.

А дальше вебпак и

code generated modules 213 KiB (javascript) 24.1 KiB (css/mini-extract) [code generated]
  modules by path ./src/css/*.css 250 bytes (javascript) 24.1 KiB (css/mini-extract)
    cacheable modules 250 bytes 5 modules
    css modules 24.1 KiB
      css ./node_modules/css-loader/dist/cjs.js!./src/css/index.css 1.54 KiB [code generated]
      css ./node_modules/css-loader/dist/cjs.js!./src/css/sprite.css 868 bytes [code generated]
      css ./node_modules/css-loader/dist/cjs.js!./src/css/panels.css 7.38 KiB [code generated]
      css ./node_modules/css-loader/dist/cjs.js!./src/css/form.css 13.9 KiB [code generated]
      css ./node_modules/css-loader/dist/cjs.js!./src/css/media.css 480 bytes [code generated]
  ./src/index.js + 28 modules 134 KiB [built] [code generated]
  ./src/logined.js 23 bytes [built] [code generated]
  ./src/slider.js + 1 modules 78.9 KiB [built] [code generated]
webpack 5.37.0 compiled successfully in 1735 ms

Может вы просто через инспектор смотрите.

Имеем в html

 <div uuuu dudu="1">Attr</div>

это видно в "полезной нагрузке ответа" консоли

Firefox, в своей внутренней кухне это преобразует в

<div uuuu="" dudu="1">Attr</div>

Это можно увидеть в "инспекторе", ну или

console.log('div.outerHTML:', a.outerHTML, '\nBody:', document.body.innerHTML);

И так и так можно, только в одном случае на 3 байта ответ больше.