Больше способов инстанцирования веб-компонентов

На прошлой неделе мы рассмотрели несколько способов настройки HTML в веб-компоненте, но сегодня я хочу поделиться ещё двумя.

Использование requestAnimationFrame() или setTimeout()

Один из вариантов решения этой проблемы — попытаться настроить веб-компонент, и если какой-либо требуемый HTML отсутствует, использовать requestAnimationFrame() или setTimeout(), чтобы попробовать снова после следующей прорисовки браузера.

Например, представьте, что в классе веб-компонента есть метод setup(), настраивающий DOM и добавляющий все интерактивные возможности.

/**
 * Настройка веб-компонента при подключении к DOM
 */
setup () {

  // Установка свойств
  this.button = this.querySelector('button');
  this.count = parseFloat(this.getAttribute('start')) || 0;
  this.step = parseFloat(this.getAttribute('step')) || 1;
  this.text = this.getAttribute('text') || 'Clicked  Times';

  // Прослушивание события click
  this.button.addEventListener('click', this);

  // Объявление об обновлении UI
  this.button.setAttribute('aria-live', 'polite');

}

Установив this.button, можно проверить, существует ли свойство.

Если нет, то можно использовать requestAnimationFrame() для повторного запуска this.setup() при следующей прорисовке браузера, а остальную настройку отложить до этого момента.

/**
 * Настройка веб-компонента при подключении к DOM
 */
setup () {

  // Получение button
  this.button = this.querySelector('button');

  // Если его нет, повторяем попытку после следующей прорисовки.
  if (!this.button) {
    requestAnimationFrame(() => {
      this.setup();
    });
    return;
  }

  // Установка оставшихся свойств
  // ...

}

See the Pen

Использование атрибута [ready]

На прошлой неделе мы узнали, что веб-компоненты могут автоматически определять добавление, удаление или изменение атрибутов.

Можно использовать эту встроенную функциональность, чтобы определять, если атрибут [ready] добавлен к компоненту, и запускать настройку, когда это произойдёт.

// Определение атрибутов для наблюдения
static observedAttributes = ['ready'];

/**
 * Настройка компонента при добавлении атрибута [ready]
 */
attributeChangedCallback () {
  this.setup();
}

See the Pen

Какой подход следует использовать

Если бы я создавал веб-компоненты для системы проектирования, которая могла бы использоваться разными разработчиками различными способами, я бы, скорее всего, объединил несколько из этих подходов, чтобы предоставить разработчикам множество вариантов…

• Автоматическое инстанцирование при создании элемента.
• Метод this.setup(), который можно запустить вручную
• Использование requestAnimationFrame() для повторения нескольких попыток (я бы остановился после нескольких неудачных попыток).
• Атрибут [ready]

Какой подход вам нравится больше?

Все статьи серии о Веб-Компонентах/Web Component

• Ваш первый веб-компонент
• Добавление опций в веб-компонент
• Улучшение веб-компонента
• Различные способы инстанцирования веб-компонента
• Методы жизненного цикла веб-компонента
• Как обнаружить изменение атрибутов веб-компонента
• Как заставить веб-компоненты общаться (часть 1)
• Как заставить веб-компоненты общаться (часть 2)
• Больше способов инстанцирования веб-компонентов