0xD34F

погуглите colspan

event.target.tagName != 'button'

Ясно:

В XML (и XML-подобных языках) возвращаемое значение будет в нижнем регистре, а в HTML - в верхнем.

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

event.target.classList.contains('remove-button')

// или

event.target.matches('.remove-button')

Меняют цвет все. Просто не видно - правую границу перекрывает следующий элемент.

Увеличивайте label'ам z-index при hover'е.

Может написать регулярку, которая будет убирать только первый и последнии слеши?

Зачем такие сложности? Вы знаете, что лишними в строке являются первый и последний символы - ну так может, их и отрезать? - типа, .slice(1, -1).

Ну и если вдруг объект regexp используется только для задания значений атрибута pattern, то пусть его свойства будут сразу строками, а не регулярными выражениями. И ещё, зачем делать его обычным полем класса? - так будет создаваться отдельный объект для каждого экземпляра. Пусть будет статическим или вообще не принадлежит классу.

document.querySelector('textarea').addEventListener('keydown', e => e.preventDefault());

или

<textarea readonly></textarea>

Кавычки надо экранировать. Например.

Открываем консоль, а там... а там... а там вот что:

Mixed Content: The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js'. This request has been blocked; the content must be served over HTTPS.

Ну и всё, не загружен slick.

.text::after {
  content: '';
  position: absolute;
  left: 23px;
  top: -10px;
  width: 16px;
  height: 16px;
  background: #f2fbff;
  border: 1px solid transparent;
  border-top-color: #cfcfcf;
  border-left-color: #cfcfcf;
  transform: rotate(45deg);
}

Потому что в html далеко не всякий тэг может быть самозакрывающимся, и если не может, а вы его так оформили, то он рассматривается браузером как открывающий, и всё, что следует за ним, попадает внутрь элемента. То есть, у вас элемент app имеет дочерний элемент designer, у него тоже есть дочерний элемент - higlighter, у которого внутри context-menu. В таком виде ваш шаблон попадает к Vue.

Так что закрывайте тэги, или вместо dom-шаблона используйте что-нибудь другое - свойство template, render-функция, однофайловые компоненты.

При моей структуре достать его через css не получится наверное? (да/нет?)

получится, если разместить input'ы перед label'ами

Нужно сделать два цикла - по элементам массива с данными, и по элементам вложенных массивов.

Вариант раз: внешний v-for вешаем на template, внутренний на tr, ячейки с rowspan'ами выводятся только на нулевой итерации внутреннего цикла:

<template v-for="row in rows">
  <tr v-for="(n, i) in row.links">
    <td v-if="!i" :rowspan="row.links.length">{{ row.name }}</td>
    <td v-if="!i" :rowspan="row.links.length">{{ row.age }}</td>
    <td>{{ n }}</td>
  </tr>
</template>

Если ячейки с rowspan'ами прописывать вручную не хочется, то добавляем ещё по одному template и v-for:

<template v-if="!i">
  <td v-for="k in [ 'name', 'age' ]" :rowspan="row.links.length">{{ row[k] }}</td>
</template>

Вариант два - отказаться от использования rowspan, выводить все элементы вложенных массивов в одну ячейку, стилизованную под несколько:

<tr v-for="row in rows">
  <td v-for="item in row">
    <template v-if="item instanceof Array">
      <div v-for="n in item">{{ n }}</div>
    </template>
    <template v-else>{{ item }}</template>
  </td>
</tr>

Вариант три (демо не будет, лень делать) - строка с rowspan'ами рендерится отдельно, затем цикл по вложенному массиву без нулевого элемента:

<template v-for="row in rows">
  <tr>
    <td :rowspan="row.links.length">{{ row.name }}</td>
    <td :rowspan="row.links.length">{{ row.age }}</td>
    <td>{{ row.links[0] }}</td>
  </tr>
  <tr v-for="n in row.links.slice(1)">
    <td>{{ n }}</td>
  </tr>
</template>

Неправильное подключение?

Так точно.

Подключаете jquery с атрибутом async, из-за чего плагину слайдера некуда устанавливаться. Если async убрать, всплывёт другая проблема - вы подключаете jquery два раза, и второе подключение перетирает результаты первого, вы получаете версию библиотеки без плагина слайдера.

pointer-events: none для ::after

скрытые радиокнопки:

<label class="button">
  <input type="radio" name="button">
  <span>click me</span>
</label>

<label class="button">
  <input type="radio" name="button">
  <span>click me</span>
</label>

.button input {
  display: none;
}

.button input:checked + span {
  background: red;
  color: white;
}

Продублировать option'ы. Первый в каждой из полученных пар будет содержать текст, отображаемый в качестве выбранного, при этом сам он должен быть скрыт, чтобы не отображаться в выпадающем списке. При выборе следует присвоить select'у его текущее значение, чтобы выбранным option'ом (т.е. тем, чей текст будет показан в select'е) вместо видимого второго оказался скрытый первый.

select.innerHTML = [
  { val:  69, optionText:  'hello, world!!', selectText:  'HELLO, WORLD!!' },
  { val: 187, optionText:  'fuck the world', selectText:  'FUCK THE WORLD' },
  { val: 666, optionText: 'fuck everything', selectText: 'FUCK EVERYTHING' },
].map(n => `
  <option value="${n.val}" hidden>${n.selectText}</option>
  <option value="${n.val}">${n.optionText}</option>
`).join('');

select.addEventListener('change', e => e.target.value = e.target.value);

Вынесите её в thead.


UPD. Как это может выглядеть: thead, и дурацкий вариант.

const parseUL = ul => ul
  ? Array.from(ul.children, n => ({
      text: (([...n.childNodes].find(n => n.nodeType === 3) || {}).textContent || '').trim(),
      children: parseUL(n.querySelector('ul')),
    }))
  : [];


const data = parseUL(document.querySelector('.menu'));

canvas

https://jsfiddle.net/fe7vL23u/