Были ли ситуации когда нужно было добавить нестандартные элементы

Нестандартные HTML элементы (Custom Elements)

Это вопрос о личном опыте использования веб-компонентов и кастомных HTML элементов. Такие элементы создаются через Web Components API, стандарт ECMAScript, который позволяет разработчикам создавать свои переиспользуемые элементы.

Что такое нестандартные элементы?

Нестандартные элементы (Custom Elements, Web Components) - это собственные HTML теги, которые вы создаёте и определяете сами.

<!-- Стандартные элементы -->
<div></div>
<button></button>
<input />

<!-- Нестандартные элементы (custom) -->
<my-button></my-button>
<custom-card></custom-card>
<data-table></data-table>

Правила именования

Важно: нестандартные элементы ДОЛЖНЫ содержать дефис в имени:

<!-- ✅ Правильно -->
<my-component></my-component>
<user-card></user-card>
<awesome-button></awesome-button>

<!-- ❌ Неправильно (зарезервировано для стандартных элементов) -->
<mycomponent></mycomponent>
<usercard></usercard>

Создание Custom Element

Базовый пример

// 1. Определяем класс для custom element
class MyButton extends HTMLElement {
  constructor() {
    super();
    // Инициализация
  }

  // Вызывается когда элемент добавлен в DOM
  connectedCallback() {
    this.render();
  }

  render() {
    this.innerHTML = `
      <button style="padding: 10px; background: blue; color: white;">
        ${this.textContent || 'Click me'}
      </button>
    `;
  }
}

// 2. Регистрируем элемент
customElements.define('my-button', MyButton);

<!-- Используем в HTML -->
<my-button>Кликни меня</my-button>

<!-- Результат: <button style="..." -->

Реальные примеры использования

Пример 1: Custom Card Component

class UserCard extends HTMLElement {
  connectedCallback() {
    const name = this.getAttribute('name') || 'Unknown';
    const email = this.getAttribute('email') || 'N/A';
    const avatar = this.getAttribute('avatar') || 'default.jpg';

    this.innerHTML = `
      <div style="border: 1px solid #ccc; padding: 20px; border-radius: 8px;">
        <img src="${avatar}" alt="${name}" style="width: 100px; height: 100px; border-radius: 50%;" />
        <h3>${name}</h3>
        <p>Email: ${email}</p>
        <slot></slot>
      </div>
    `;
  }
}

customElements.define('user-card', UserCard);

<user-card name="John Doe" email="john@example.com" avatar="/avatar.jpg">
  <p>Software Developer</p>
</user-card>

Пример 2: Custom Modal с Shadow DOM

class CustomModal extends HTMLElement {
  constructor() {
    super();
    // Создаём Shadow DOM для изоляции стилей
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          --modal-bg: white;
          --modal-border: #ddd;
        }

        .modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .modal-content {
          background: var(--modal-bg);
          border: 1px solid var(--modal-border);
          border-radius: 8px;
          padding: 20px;
          max-width: 500px;
        }

        .close-btn {
          float: right;
          cursor: pointer;
          font-size: 20px;
        }
      </style>

      <div class="modal-overlay">
        <div class="modal-content">
          <span class="close-btn">&times;</span>
          <slot></slot>
        </div>
      </div>
    `;

    // Закрытие модала
    this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => {
      this.remove();
    });
  }
}

customElements.define('custom-modal', CustomModal);

<custom-modal>
  <h2>Confirm Action</h2>
  <p>Do you want to proceed?</p>
</custom-modal>

Пример 3: Custom Data Picker

class DatePicker extends HTMLElement {
  connectedCallback() {
    const value = this.getAttribute('value') || new Date().toISOString().split('T')[0];
    
    this.innerHTML = `
      <input type="date" value="${value}" />
    `;

    this.querySelector('input').addEventListener('change', (e) => {
      // Срабатывает custom event
      this.dispatchEvent(new CustomEvent('datechange', {
        detail: { date: e.target.value }
      }));
    });
  }
}

customElements.define('date-picker', DatePicker);

<date-picker id="myDate" value="2024-04-02"></date-picker>

<script>
  document.getElementById('myDate').addEventListener('datechange', (e) => {
    console.log('Selected date:', e.detail.date);
  });
</script>

Когда нужны custom elements?

1. Сложные переиспользуемые компоненты

// Вместо создания одного и того же компонента в разных фреймворках
// Создайте Web Component один раз и используйте везде

// React
<MyButton>Click</MyButton>

// Vue
<MyButton>Click</MyButton>

// Angular
<MyButton>Click</MyButton>

// Ванильный JavaScript
<MyButton>Click</MyButton>

2. Интеграция с другими фреймворками

// Если проект использует несколько фреймворков одновременно
// Web Components позволяют им взаимодействовать

// React компонент использует Web Component
function App() {
  return <my-custom-element></my-custom-element>;
}

// Angular компонент использует тот же Web Component
<my-custom-element></my-custom-element>

3. Микро-фронтенд архитектура

// Разные приложения могут делиться Web Components
// Приложение 1 экспортирует
customElements.define('shared-table', SharedTable);

// Приложение 2 импортирует
<shared-table data-source="/api/data"></shared-table>

4. Дизайн-системы и UI библиотеки

// Создание кастомной UI библиотеки
customElements.define('ds-button', DSButton);
customElements.define('ds-card', DSCard);
customElements.define('ds-modal', DSModal);

// Используется независимо от фреймворка

Жизненный цикл Custom Elements

class MyElement extends HTMLElement {
  constructor() {
    super();
    // Вызывается когда создаётся новый экземпляр
    console.log('constructor');
  }

  connectedCallback() {
    // Вызывается когда элемент добавлен в DOM
    console.log('connected to DOM');
  }

  disconnectedCallback() {
    // Вызывается когда элемент удалён из DOM
    console.log('disconnected from DOM');
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // Вызывается когда атрибут изменился
    console.log(`${name} changed from ${oldValue} to ${newValue}`);
  }

  adoptedCallback() {
    // Вызывается когда элемент перемещён в другой документ
    console.log('adopted to new document');
  }

  // Какие атрибуты отслеживать
  static get observedAttributes() {
    return ['name', 'value', 'disabled'];
  }
}

Shadow DOM для изоляции

class IsolatedComponent extends HTMLElement {
  constructor() {
    super();
    // Shadow DOM изолирует стили и DOM
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        /* Эти стили НЕ влияют на внешний документ */
        :host {
          display: block;
          padding: 10px;
        }
        
        button {
          background: blue;  /* Только для кнопок внутри этого компонента */
        }
      </style>
      
      <button>Click me</button>
      <slot></slot>  <!-- Место для слотированного контента -->
    `;
  }
}

customElements.define('isolated-component', IsolatedComponent);

Проблемы и ограничения

1. Браузерная поддержка

// Проверка поддержки
if ('customElements' in window) {
  // Web Components поддерживаются
} else {
  // Fallback для старых браузеров
  console.warn('Web Components не поддерживаются');
}

2. Сложность отладки

// Shadow DOM может затруднить отладку в DevTools
// Но можно открыть DevTools settings -> Elements -> Show user agent shadow DOM

3. Совместимость с фреймворками

// Некоторые фреймворки лучше работают с Web Components
// React требует обёртки для корректной работы с событиями

// Angular имеет встроенную поддержку
// Vue 3 имеет встроенную поддержку

Пример интеграции с React

// React обёртка для Web Component
function MyCustomButton(props) {
  const ref = React.useRef();

  React.useEffect(() => {
    const element = ref.current;
    
    // Обработка custom events
    const handleCustomEvent = (e) => {
      props.onCustomEvent?.(e.detail);
    };
    
    element.addEventListener('customevent', handleCustomEvent);
    
    return () => {
      element.removeEventListener('customevent', handleCustomEvent);
    };
  }, [props]);

  return <my-custom-button ref={ref} {...props} />;
}

Альтернативы

1. Использование фреймворка (React, Vue, Angular)

// Часто фреймворки предоставляют достаточную функциональность
// без необходимости Web Components

2. Использование UI библиотек (Material UI, shadcn/ui)

// Готовые компоненты уже оптимизированы
// и протестированы

Вывод

Нестандартные HTML элементы (Web Components) используются когда нужно:

1. Максимальная переиспользуемость - компонент работает везде
2. Кроссфреймворк интеграция - разные фреймворки в одном приложении
3. Изоляция стилей и логики - через Shadow DOM
4. Долгоживущие компоненты - которые переживут изменение фреймворка
5. Микро-фронтенд архитектура - независимые приложения

Однако, для большинства обычных веб-приложений использование фреймворка (React, Vue, Angular) является более практичным выбором. Web Components лучше всего использовать для специфичных случаев, когда их преимущества явно перевешивают дополнительную сложность.