0xD34F

оборачивается не полностью

Почему так: childNodes представляет собой динамическую коллекцию, т.е., при добавлении или удалении узлов она обновляется без каких-либо действий с вашей стороны. Поэтому, когда вы добавляете в wrapper нулевой узел, он тут же пропадает из item.childNodes, а у оставшихся узлов позиция уменьшается на единицу - тот, что был первым, становится нулевым, второй первым и так далее. Так что когда for...of переходит к следующему узлу, им оказывается не тот, что изначально имел индекс 1, а расположенный за ним. Бывший первый, а теперь нулевой, оказывается пропущен. Аналогичным образом будут пропущены и все последующие узлы, изначально имевшие нечётные индексы.

Что тут можно сделать:

Вариант раз - вместо перебора узлов всегда работать с тем, что имеет нулевой индекс:

for (let n; n = item.firstChild;) {
  wrapper.appendChild(n);
}

Два - перебирать childNodes от конца к началу:

for (let i = item.childNodes.length; i--;) {
  wrapper.prepend(item.childNodes[i]);
}

Три - перебирать не childNodes, а массив:

for (const n of [...item.childNodes]) {
  wrapper.insertBefore(n, null);
}

А вообще, нет необходимости работать с каждым узлом индивидуально, метод append может принимать несколько параметров, так что переносим сразу всё:

document.querySelectorAll('.www').forEach(n => {
  const wrapper = document.createElement('div');
  wrapper.classList.add('red');
  wrapper.append(...n.childNodes);
  n.append(wrapper);
});

Или, можно и вовсе узлы не трогать, если перезаписывать разметку:

for (const n of document.getElementsByClassName('www')) {
  n.innerHTML = `<div class="red">${n.innerHTML}</div>`;
}

https://www.google.com/search?q=css+glass+effect

computed: {
  summary() {
    return (this.choosenSize?.cost ?? 0) + this.choosenTopping.reduce((acc, n) => acc + n.cost, 0);
  },
},

from random import choice

chars = '0123456789abcdefghijklmnopqrstuvwxyz'
section_size = 4
sections_num = 5

string = '-'.join(''.join(choice(chars) for j in range(section_size)) for i in range(sections_num))

const sorted = arr
  .map(n => [
    n,
    +new URLSearchParams(n.querySelector('a').href.split('?').pop()).get('value') || Infinity,
  ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);

UPD. А точно массив? Если всё-таки сортировать надо элементы внутри их родителя, то

parentEl.append(...Array
  .from(parentEl.querySelectorAll('a'), n => [
    n.parentNode,
    Number(n.getAttribute('href').match(/(?<=value=)\d+/)) || Infinity,
  ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0])
);

const Figure = ({ type, ...props }) => <div className={type} {...props}></div>;

class App extends React.Component {
  state = {
    types: [ 'circle', 'square', 'triangle' ],
    figures: [],
  }

  add(type) {
    this.setState(({ figures }) => ({
      figures: [ ...figures, type ],
    }));
  }

  render() {
    const { types, figures } = this.state;

    return (
      <div>
        <div>
          {types.map(n => <Figure type={n} onClick={() => this.add(n)} />)}
        </div>
        <div>
          {figures.map(n => <Figure type={n} />)}
        </div>
      </div>
    );
  }
}

Так делать не принято, и вам это не нужно.

Раз у всех этих элементов должен быть один класс, это должны быть корневые элементы экземпляров компонента Preloader. Тэг можно передать через props, как и те элементы, что сейчас являются соседними:

function Preloader({ Tag = 'h1', children }) {
  return (
    <Tag className={s.wrapper}>
      <div className={s.preloader}></div>
      {children}
    </Tag>
  );
}

<div className="App">
  <Preloader>hello, world!!</Preloader>
  <Preloader Tag="h2">fuck the world</Preloader>
</div>

добавить ? после +

Сделать функцию, принимающую input, находящую соответствующий input'у span и обновляющую его содержимое:

const updateValue = input =>
  input.previousElementSibling.querySelector('.p_value').innerText = input.value;

У input'ов вырезать инлайновые обработчики, добавить общий класс, например: class="xxx".

Дальше можно повесить делегированный обработчик, внутри которого проверять наличие этого класса:

document.addEventListener('input', ({ target: t }) => {
  if (t.classList.contains('xxx')) {
    updateValue(t);
  }
});

Или назначить обработчик каждому input'у индивидуально:

document.querySelectorAll('.xxx').forEach(function(n) {
  n.addEventListener('input', this);
}, e => updateValue(e.target));

watch: {
  cloneItems(old, cur) {
    this.prevItems = old;
  },

Вот что бывает, когда не читаешь документацию.
Параметры местами перепутаны - сначала новое значение, потом старое.

computed: {
  cloneItems: () => this.items.slice(),

Вот что бывает, когда не знаешь язык.
Контекст внутри cloneItems - это не экземпляр компонента. Заменить стрелочную функцию на обычную.

prev items:
<div v-for="item in items" :key="item">

Вот что бывает, когда бездумно копипастишь .
Заголовок поменяли, а про выводимые данные забыли.

this.items = [...this.items, Date.now()];

Нет необходимости создавать новый массив, достаточно делать push - вызовы мутирующих методов тоже отслеживаются.

Ну а если всё же намерены и дальше перезаписывать массив целиком, то нет необходимости делать копию - можно следить сразу за оригиналом, раз он заменяется целиком.

const cols = document.querySelectorAll('.col');

cols.forEach(n => {
  n.addEventListener('mouseover', onHover);
  n.addEventListener('mouseout', onHover);
});

function onHover(e) {
  const index = [...this.children].findIndex(n => n.contains(e.target));
  if (index !== -1) {
    const t = e.type === 'mouseover';
    cols.forEach(n => n.children[index].classList.toggle('hovered', t));
  }
}

Не надо пытаться заниматься ерундой, сортируют массивы, а не объекты.

Object
  .entries(arr.reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {}))
  .sort((a, b) => b[1] - a[1])
  .forEach(n => console.log(n.join(': ')));

О каких ссылках идёт речь:

const links = document.querySelectorAll('.nav-about a');

"Нумеруем":

links.forEach((n, i) => n.attributes.href.value += i + 1);

// или

for (const [ i, n ] of links.entries()) {
  n.setAttribute('href', n.getAttribute('href').concat(-~i));
}

// или

for (let i = 0; i < links.length;) {
  links[i].href = links[i].href.replace(/.*(#.*)/, `$1${++i}`);
}

$('button').click(() => $('select').prop('selectedIndex', 0));

или, к чёрту jquery:

document.querySelector('button').addEventListener('click', () => {
  document.querySelectorAll('select').forEach(n => {
    // Какие тут есть варианты:

    // 1. Установить индекс выбранного option'а
    n.selectedIndex = 0;

    // 2. Установить select'у значение option'а, который должен быть выбран
    //    (чтобы заработало, надо будет добавить value="" option'ам)
    n.value = '';

    // 3. Назначить true свойству selected того option'а, на который надо переключиться
    n[0].selected = true;
    // или
    // n.options[0].selected = true;
    // n.children[0].selected = true;
    // n.firstElementChild.selected = true;
    // n.querySelector('option').selected = true;
  });
});

https://codesandbox.io/s/for-https-qna-habr-com-q-...

Массивы сложить в массив (const arrs = [ arr1, arr2 ];), дальше есть варианты:

const result = arrs[0].map((_, i) => arrs.flatMap(arr => arr[i]));

или

const result = arrs.reduce((acc, arr) => (
  arr.forEach((n, i) => (acc[i] ??= []).push(...n)),
  acc
), []);

или

const result = [];

for (const arr of arrs) {
  for (const [ i, n ] of arr.entries()) {
    if (!result[i]) {
      result[i] = [];
    }

    for (const m of n) {
      result[i][result[i].length] = m;
    }
  }
}

или

function* zip(data, defaultValue = null) {
  const iterators = Array.from(data, n => n[Symbol.iterator]());

  for (let doneAll = false; doneAll = !doneAll;) {
    const values = [];

    for (const n of iterators) {
      const { value, done } = n.next();
      values.push(done ? defaultValue : value);
      doneAll &&= done;
    }

    if (!doneAll) {
      yield values;
    }
  }
}

const result = Array.from(zip(arrs), n => n.flat());

Что такое product?

Если это одиночный объект, то проще всего будет установить наблюдение за интересующим вас свойством:

watch: {
  'product.qty'(val) {
    this.product.qty = Math.max(1, Math.min(99, val | 0));
  },
},

Если у вас там v-for и это элемент массива, то можно установить глубокое наблюдение за всем массивом:

watch: {
  products: {
    deep: true,
    handler: val => val.forEach(n => n.qty = Math.max(1, Math.min(99, n.qty | 0))),
  },
},

Если не нравится watch - исправляйте непосредственно пользовательский ввод:

methods: {
  onInput(e) {
    if (e.isTrusted) {
      e.target.value = Math.max(1, Math.min(99, e.target.value | 0));
      e.target.dispatchEvent(new Event('input'));
    }
  },
},

<input
  @input="onInput"
  ...

Можно даже это дело оформить в виде директивы:

function onInput({ isTrusted, target: t }) {
  if (isTrusted) {
    t.value = Math.max(t.min, Math.min(t.max, t.value | 0));
    t.dispatchEvent(new Event('input'));
  }
}

const minmaxDirective = {
  mounted: el => el.addEventListener('input', onInput),
  unbind: el => el.removeEventListener('input', onInput),
};

app.directive('minmax', minmaxDirective);

<input
  v-minmax
  min="1"
  max="99"
  ...

item = max(arr, key=lambda n: n['width'] * n['height'])

Добавить в обработчик dragend:

box.querySelectorAll('.item').forEach((n, i) => n.dataset.priority = -~i);

// или

for (const [ i, n ] of box.querySelectorAll('.item').entries()) {
  n.setAttribute('data-priority', i + 1);
}

// или

for (let i = box.children.length; i;) {
  const attr = document.createAttribute('data-priority');
  attr.value = i;
  box.children[--i].attributes.setNamedItem(attr);
}

// или

(function next(i, n) {
  n && next(n.attributes['data-priority'].value = ++i, n.nextElementSibling);
})(0, box.firstElementChild);

Не надо никаких data-атрибутов. Передавайте эти id в properties (второй параметр конструктора) placemark'ов, при клике получайте:

e.get('target').properties.get('имяСвойстваСодержащегоId')

Ну а что до показанного вами кода...

• Почему в шаблоны placemark'ов зашивается id? Неужели вы до сих пор не в курсе, что id должны быть уникальны? Кстати, поэтому у вас и "выводит всегда 1" - ищите элемент по id, вот и получаете всегда первый из созданных.
  
• Зачем вообще понадобилось искать элемент и читать data-атрибут, значение которого вам и так доступно внутри обработчика (shop.id)?
  
• Создавать отдельный layout под каждый placemark не надо. Вынесите создание layout'а за пределы цикла. Если надо передавать в шаблон какие-то уникальные значения, то их опять же можно подтянуть из свойств. Как бы это выглядело для вашего data-атрибута:
  
  

  <div data-id="{{ properties.имяСвойстваСодержащегоId }}">

  
  Также не надо создавать отдельные функции, назначаемые в качестве обработчиков клика - создайте один обработчик за пределами цикла (да, достать id из shop после этого уже не получится, как было сказано в начале - передавайте его через properties).