0xD34F

Можно попробовать обшарить document.styleSheets:

const getClassStyles = className =>
  [...document.styleSheets].reduce((styles, { cssRules }) => {
    return [...cssRules]
      .filter(n => n.selectorText === `.${className}`)
      .reduce((styles, { cssText }) => {
        return (cssText
          .match(/[\w\-]+: [^;]+/g) || [])
          .map(n => n.split(': '))
          .reduce((styles, [ k, v ]) => (styles[k] = v, styles), styles);
      }, styles);
  }, {});


const styles = getClassStyles('class-name');

data: () => ({
  items: [
    { value:  69, title:  'hello, world!!', checked: false },
    { value: 187, title:  'fuck the world', checked: false },
    { value: 666, title: 'fuck everything', checked: false },
  ],
}),
computed: {
  sum() {
    return this.items.reduce((acc, n) => acc + n.value * n.checked, 0);
  },
  checkAll: {
    get() {
      return this.items.every(n => n.checked);
    },
    set(val) {
      this.items.forEach(n => n.checked = val);
    },
  },
},

<div>
  <label>
    <input type="checkbox" v-model="checkAll">
    CHECK ALL
  </label>
</div>

<div v-for="n in items">
  <label>
    <input type="checkbox" v-model="n.checked">
    {{ n.title }}
  </label>
</div>

<div>SUM: {{ sum }}</div>

получилось вывести только элементы первого уровня, но не могу понять, как заставить выводиться дочерние элементы

Рекурсия. Если в элементе есть непустой массив children, то делаете рекурсивный вызов функции, передавая ей этот массив.

Можно напрямую создавать элементы:

const createTreeElement = data =>
  Array.isArray(data) && data.length
    ? data.reduce((ul, n) => {
        const li = document.createElement('li');
        const div = document.createElement('div');
        div.textContent = n.name;
        li.append(div, createTreeElement(n.children));
        ul.append(li);
        return ul;
      }, document.createElement('ul'))
    : '';


document.body.append(createTreeElement(data));

Или собрать соответствующую разметку:

const createTreeHTML = data =>
  data instanceof Array && data.length
    ? `<ul>${data.map(n => `
         <li>
           <div>${n.name}</div>
           ${createTreeHTML(n.children)}
         </li>`).join('')}
       </ul>`
    : '';


document.body.insertAdjacentHTML('beforeend', createTreeHTML(data));

Добавьте в LibraryContent:

componentDidUpdate(prevProps) {
  if (prevProps.url !== this.props.url) {
    this.getData();
  }
}

Так:

коллекцияМаркеров.events.add('click', function(e) {
  e.get('currentTarget').each(function(n) {
    n.options.set('preset', n === this ? 'islands#greenIcon' : 'islands#blueIcon');
  }, e.get('target'));
});

или

let activeMarker = null;

// ...

коллекцияМаркеров.events.add('click', function(e) {
  if (activeMarker) {
    activeMarker.options.set('preset', 'islands#blueIcon');
  }

  activeMarker = e.get('target');
  activeMarker.options.set('preset', 'islands#greenIcon');
});

??

const images = [
  {
    src: 'https://i.imgur.com/GigS3KR.png',
    translate: [ 50, 50, 500, 20 ],
    rotate: [ 340, 200 ],
    draw: [ 0, 0, 0.95 ],
  },
  {
    src: 'https://i.imgur.com/y3JAe69.png',
    translate: [ 5, 0, 382, 2 ],
    rotate: [ 630, 40 ],
    draw: [ 150, 100, 0.84 ],
  },
  {
    src: 'https://i.imgur.com/v30JIWp.png',
    translate: [ 8, 150, 198, 3 ],
    rotate: [ 500, 450 ],
    draw: [ 0, 0, 0.7 ],
  },
].map(n => {
  n.draw.unshift(new Image);
  n.draw[0].src = n.src;
  return n;
});

const canvases = document.querySelectorAll('.canvas');
const canvasSize = document.documentElement.clientWidth;

for (const n of canvases) {
  n.setAttribute('width', canvasSize);
  n.setAttribute('height', canvasSize);
}

let ts0;
window.requestAnimationFrame(function draw(ts) {
  for (const n of canvases) {
    ts0 = ts0 || ts;
    const dt = ts - ts0;

    const ctx = n.getContext('2d');
    ctx.clearRect(0, 0, canvasSize, canvasSize);

    for (const { translate: t, rotate: r, draw: d } of images) {
      ctx.save();
      ctx.translate(t[0], t[1] + Math.sin(dt / t[2]) / t[3]);
      ctx.rotate(Math.sin(dt / r[0]) / r[1]);
      ctx.drawImage(d[0], d[1], d[2], canvasSize * d[3], canvasSize * d[3]);
      ctx.restore();
    }
  }

  window.requestAnimationFrame(draw);
});

Это либо недоработка создателя компонента либо...

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

Что можно сделать, ну, кроме поиска более подходящего компонента? Как вариант - можно задать key, зависящий от значения records - тогда изменение последнего приведёт к созданию нового экземпляра компонента:

<pagination
  :key="records"
  ...

тег должен меняться,а не добавляться, как по дефолту сейчас

Вообще-то, "по дефолту" - это как раз то, что вам нужно. Внимательнее изучайте документацию.

Вообще-то, нет гарантии, что операция выполняется над числом. Это может быть что угодно. Собственно, потому тут и применяется побитовый оператор - чтобы гарантировать, что len будет целым числом. А почему применяется именно >>>, а не | или >> - число должно быть не только целым, но и положительным (или, если быть более точным, неотрицательным - 0 тоже окей).

Маркер из примера можно взять как он есть, а для определения положения использовать метод getCenter. Как-то так.

О каких радиокнопках идёт речь:

const radioSelector = '.radio_wrap input[type="radio"]';

Как, имея радиокнопку, можно получить содержимое её label'а:

const getLabel = el => document.querySelector(`[for="${el.id}"]`).textContent;
// или
const getLabel = el => el.nextElementSibling.innerText;
// или
const getLabel = el => el.labels[0].innerHTML;

Получаем, по событию change:

// назначаем обработчик события каждой радиокнопке индивидуально
document.querySelectorAll(radioSelector).forEach(function(n) {
  n.addEventListener('change', this);
}, e => console.log(getLabel(e.target)));

// или, можно сделать делегированный обработчик, где будет проверка, откуда пришло событие
document.addEventListener('change', ({ target: t }) => {
  if (t.matches(radioSelector)) {
    console.log(getLabel(t));
  }
});

computed: {
  foundItems() {
    return []
      .concat(...this.items.map(n => n.props || []))
      .filter(n => n.name.includes(this.search));
  },
},

<li v-for="item in foundItems">
  {{ item.name }}
</li>

https://jsfiddle.net/8qyrtsac/

Попробуйте заменить

'.catalog__scrollbarLine'

на

$(this).find('.catalog__scrollbarLine')

или

$(this).find('.catalog__scrollbarLine')[0]

Если вы внутри функции определяете переменную с таким же именем, как и у переменной из внешней области видимости, то последняя окажется недоступной. Строка 57 - уберите ключевое слово var.

setTimeout(show(i), i * 300);

Вместо того, чтобы передать в setTimeout функцию, вы её вызываете.

Какие есть варианты исправить косяк:

1. Оберните вызов своей функции в другую функцию, которая будет передана в setTimeout:
   
   setTimeout(() => show(i), i * 300);
   
   
2. Выполните привязку параметра:
   
   setTimeout(show.bind(null, i), i * 300);
   
   
3. Передавайте свою функцию в setTimeout, а параметры, с которыми она должны быть вызвана, укажите отдельно:
   
   setTimeout(show, i * 300, i);
   
   
4. Перепишите свою функцию так, чтобы она возвращала другую функцию:
   
   

   function show(x) {
     return function() {
       // сюда помещаете то, что находится у вас в show сейчас
     };
   }

   
   

Не работающая часть
class NewsLoader {

https://caniuse.com/#feat=es6-class

Кто "дальний родитель", и кто "потомок":

const ancestorSelector = 'селектор дальнего родителя';
const descendantSelector = 'селектор потомка';

Если клики по вложенным элементам "потомка" учитывать не надо:

document.addEventListener('click', ({ target: t }) => {
  if (t.matches(descendantSelector)) {
    const ancestor = t.closest(ancestorSelector);
    if (ancestor) {
      ancestor.remove();
    }
  }
});

Если интересуют все клики внутри "потомка", в том числе и по его потомкам:

document.addEventListener('click', e => {
  const descendant = e.target.closest(descendantSelector);
  if (descendant) {
    const ancestor = descendant.closest(ancestorSelector);
    if (ancestor) {
      ancestor.remove();
    }
  }
});

UPD. Наконец-то дождались:

document.addEventListener('click', ({ target: t }) =>
  t.matches(descendantSelector) &&
  t.closest(ancestorSelector)?.remove()
);

document.addEventListener('click', e => {
  e.target.closest(descendantSelector)?.closest(ancestorSelector)?.remove();
});

h1::before {
  content: "";
  background-image: url(http://via.placeholder.com/50x50);
  display: inline-block;
  width: 50px;
  height: 50px;
}

UPD. Вынесено из комментариев:

Если увеличивать width или height, то картинка повторяется.
Как можно отключить повтор?

Можно картинку растянуть:

background-size: cover;

А можно не изменяя размера разместить по центру, например:

background-position: center;
background-repeat: no-repeat;

Объект-то в строку надо превратить.

Добавляете

import ReactDOMServer from 'react-dom/server';

в начало вашего index.js, затем

textField.innerText = IconsList.internet;

меняете на

textField.innerText = ReactDOMServer.renderToStaticMarkup(IconsList.internet);

<span id="typed"></span>
<div id="actions">
  <button data-action="start">play</button>
  <button data-action="stop">pause</button>
</div>

const typed = new Typed('#typed', {
  typeSpeed: 100,
  loop: true,
  strings: [
    'hello, world!!',
    'fuck the world',
    'fuck everything',
  ],
});

document.querySelector('#actions').addEventListener('click', e => {
  const { action } = e.target.dataset;
  if (action) {
    typed[action]();
  }
});