Ссылка на сайт: https://purrweb-dev.vercel.app/

Указания к тестовому заданию:

Верстка должна быть выполнена с использованием чистых HTML, CSS и JavaScript без применения сторонних библиотек или фреймворков.

В целях удобства был разработан небольшой скрипт, который позволяет разделить HTML на компоненты.

Файлы:

• ./js/NativeComponents.js
• ./index_NativeComponents.html

Настройка

Создайте родительский элемент с следующими атрибутами:

id="root" (обязательно)
data-folder="./components" // укажите путь к директории, где хранятся компоненты (по умолчанию "./imports")
data-modules="[./js/myScript_1.js, ./js/myScript_2.js]" // загрузите необходимые скрипты

Добавление дочерних элементов к компонентам

Для внедрения дочерних элементов в компонент можно использовать элемент <slot/> (с проверкой на тег). Это позволяет размещать содержимое в структуре родительского компонента.

1. ./index.html

<div id="root" data-folder="./components" data-modules="[./js/index.js]">
  // укажите путь к файлу: `data-component=""
  // интерпретация: ./components/sections/Hero.html
  <embed data-component="sections/Hero"/> // можно использовать любой тег
</div>

2. ./components/sections/Hero.html

<section class="hero">
  <div class="hero__content">
     <button data-component="Button">
      😉 Здравствуйте, как дела? 
    </button>
  </div>
</section>

3. ./components/Button.html

<button style="color: red;">
  <slot/>
</button>