Веб-компонент (часть 1, описание)

В статье я опишу простейший веб-компонент для веб-разработчиков и HTML-верстальщиков, который выводит нужное количество параграфов (до 100) известного текста Цицерона "О природе добра и зла", известный в народе как Lorem Ipsum.

Весь код веб-компонента будет размещён в единственном JavaScript-файле lorem-ipsum.js и подгружаться в основной HTML тэгом SCRIPT. Веб-компонент не требует наличия каких-либо фрэймворков, но доступен только в браузерах с поддержкой технологий Shadow DOM (теневого DOM) и Custom Elements (пользовательских тэгов), либо с подгрузкой библиотеки Polyfill.

Весь код веб-компонента обернём в вызов анонимной функции, тем самым создавая пространство имён для локальных переменных и констант:

(function() { 
  // Здесь разместим весь код...
})();

Опишем в анонимной функции список изречений разбитых на параграфы в виде константы-массива:

  const list = [
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu metus euismod, mattis sem eu, cursus sem. Praesent non sodales lorem. Curabitur in faucibus leo. Sed dapibus feugiat mi et ultricies. Curabitur iaculis velit ligula, vel tincidunt eros tempor non. Cras pharetra, quam nec ullamcorper porttitor, erat purus rhoncus lorem, ut maximus risus leo id urna. Suspendisse eu erat ac urna molestie convallis. Maecenas vel ligula ut nisl pellentesque facilisis. Praesent feugiat est sed pellentesque vestibulum.',
    'Integer sagittis augue nulla, id ullamcorper quam congue vitae. Aenean egestas tempus pretium. Phasellus gravida a eros at fermentum. Aliquam nec nunc congue, maximus neque id, dictum orci. Nulla mollis ligula dui, et gravida augue hendrerit et. Mauris viverra auctor facilisis. Aliquam eu rhoncus dolor.',
    'Vestibulum dui nisi, aliquet et egestas eget, tempus quis enim. Morbi pellentesque mattis odio. Sed mollis blandit dapibus. Morbi ut nulla feugiat, fermentum lorem a, blandit erat. Nunc non diam ipsum. Nullam congue scelerisque ipsum sed eleifend. Quisque luctus dictum justo in maximus. Aliquam velit dui, lacinia vitae velit ut, tempor rutrum ipsum. Curabitur vestibulum velit vel mi pellentesque sagittis et vel lectus. Vestibulum imperdiet risus id nunc tincidunt, vitae scelerisque velit ultrices. Morbi ornare fermentum leo, vel ornare arcu pulvinar vel. Vestibulum tincidunt vehicula libero nec aliquet.',
    'Praesent finibus libero et porta sodales. Vivamus in libero lorem. Nullam malesuada dui euismod lobortis fringilla. Aenean mattis, nibh et laoreet euismod, elit eros consectetur tortor, eget rutrum massa felis in nunc. Nullam vel ipsum id mi aliquam condimentum. Nunc tristique est vitae nunc molestie, quis congue velit auctor. Aenean hendrerit nulla nisi. Praesent facilisis pharetra hendrerit. Nam non venenatis tortor. Nunc pellentesque nec mauris sed consectetur. Donec ut ante sit amet orci sollicitudin pretium.',
    'Nullam hendrerit massa lectus, eu mollis justo mollis in. Phasellus augue purus, laoreet quis malesuada ut, lacinia a enim. Viшемvamus tristique augue eget feugiat fringilla. Donec nec nisi sed tellus iaculis maximus. Donec mi nulla, lobortis in mauris vitae, lobortis sodales quam. Nunc dignissim, odio iaculis gravida volutpat, neque lectus ornare libero, ut pharetra nibh est in magna. Phasellus sagittis eros nec lacus convallis, a dictum nulla cursus. Sed dapibus placerat diam, in finibus nisl egestas ac. Aenean ac tempus leo, non egestas nulla. Vestibulum rhoncus ante vitae purus efficitur feugiat.',
    // ... оставшиеся параграфы будут внизу, в полном исходном коде скрипта ...
  ];

Опишем класс веб-компонента, который умеет брать значение обязательного атрибута size и по его значению вставлять в HTML указанное количество параграфов из константы list:

  class LoremIpsum extends HTMLElement {
    constructor() {
      // По спецификации обязательно запускаем конструктор HTMLElement 
      super();

      // Создаём и прикрепляем теневой DOM к элементу
      this.attachShadow({mode: 'open'})

      // Проходим действия столько раз, сколько указано в атрибуте size
      for(let i = 0; i < this.getAttribute('size'); i++){

        // Создаём DOM-узел для нового параграфа
        let item = document.createElement('p');

        // Вставляем текст параграфа из списка по индексу цикла
        item.innerHTML = list[i];

        // Добавляем узел параграфа в теневой DOM
        this.shadowRoot.appendChild(item);
      }
    }
  }

Осталось лишь зарегистрировать описанное поведение для тэгов с именем lorem-ipsum:

  window.customElements.define('lorem-ipsum', LoremIpsum);

Описание веб-компонента готово. Для загрузки добавьте в HTML:

<script type="text/javascript" src="lorem-ipsum.js"></script>

И используйте в своём HTML-документе:

<lorem-ipsum size="5"></lorem-ipsum>

При показе в браузере этот код отобразит соответственно 5 параграфов речи Цицерона.

Полный код файла lorem-ipsum.js вынесен в отдельную статью т.к. не помещается в разрешённый размер.