В самом конце проекта впервые столкнулся с ситуацией, когда нужен JSX, и чтобы его придумать, нужно городить костыли.

Делаю я, значит, красивый онбординг (видосик приложу). Визуальный компонент для онбординга реюзабельный, конечно. Хочет он принимать текст какой-то через слоты. А вёрстка накладывает ограничения: весь текст должен быть строго в <span> с определённым классом.
Варианта два: все потребители контента должны быть об этом в курсе или… экшен.

Вот сейчас я в компоненте же онбординга делаю такую вот грязюку, у всех потребителей её импортирую и вешаю на элемент слота с текстами. Как считаете, аукнется мне это или нет?

  export const textAction: Action = node =>
    node.querySelectorAll('p').forEach((el: HTMLParagraphElement) => {
      const span = document.createElement('span');
      span.className = 'back';
      span.innerHTML = el.innerHTML;
      el.innerHTML = '';
      el.appendChild(span);
    });

Прикольно, но доки не помешают👍🏻хоть ридми на вход

Хочется:

<Onboarding>
  <div slot='text'>
    <p>Тут текст</p>
  </div>
</Onboarding>

, а надо:

<Onboarding>
  <div slot='text'>
    <p><span class='back'>Тут текст</span></p>
  </div>
</Onboarding>

И вот span.back надо множить на все параграфы. Это и плохо, потому что потребитель компонента ничего об этом span не знает, и банально не хочется повторяться.

А поч не написать спец компонент параграфа и не зашить туда спан?🤔

Противный микрокомпонент.
Ну и о нем опять же должны думать потребители, что вообще неверно.

Ёмана... типа строка с хтмл прилетает в Слот?

Так вот почему Рич Харрис такой популярный опенсорсер: https://twitter.com/rich_harris/status/1342632726407639057?s=21

Стоп, это строка с html из внешнего источника или все же разметка свелт компонента?

Я вот голову ломаю как вынести из экшена наружу управление intersectionObserver...🤔тоже внутри него приходится отслеживать и фильтровать нужные элементы через нативный js ... а вот как его синхронить с моим массивом элементов снаружи... 🤔

Есть у кого-то идеи про это☝🏻
Если коротко:
Хочу управлять классом элемента например по свелтовски class:animate={int} на основе данных из intersectionObserver, но не могу синхронить их с массивом элементов в {#each}... 🤔

Вот так - on:intersection={ (e) => intersectionHandle(e) } вешает класс сразу на все элементы не фильтруя их... вообщем мне нужно как-то target из intersectionObserver получить и синхронить его с id в массиве.. 🤓

Лог колбэка из обсервера в консоли браузера...

Посмотрю до дома доберусь

Есть у кого-то идеи про это☝🏻
Если коротко:
Хочу управлять классом элемента например по свелтовски class:animate={int} на основе данных из intersectionObserver, но не могу синхронить их с массивом элементов в {#each}... 🤔

Вот так - on:intersection={ (e) => intersectionHandle(e) } вешает класс сразу на все элементы не фильтруя их... вообщем мне нужно как-то target из intersectionObserver получить и синхронить его с id в массиве.. 🤓

Лог колбэка из обсервера в консоли браузера...