Как создать сайт с использованием Web Components

Web Components — это набор технологий, позволяющих создавать повторно используемые пользовательские элементы с инкапсулированным кодом и стилями. Основные составляющие Web Components — это Custom Elements, Shadow DOM и HTML Templates. В этой статье мы рассмотрим, как создать сайт используя эти технологии.

Custom Elements

Custom Elements позволяют создавать собственные HTML-теги, которые могут содержать функционал и стилизацию. Для создания Custom Element нужно определить новый класс, наследующий от HTMLElement, и зарегистрировать его с помощью customElements.define().

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('my-custom-element', MyCustomElement);

Теперь вы можете использовать ваш новый элемент <my-custom-element> в HTML-коде.

Shadow DOM

Shadow DOM позволяет инкапсулировать стили и разметку внутри Custom Element, что предотвращает влияние внешних стилей на элемент и наоборот.

Чтобы создать Shadow DOM для вашего элемента, вызовите метод attachShadow() в конструкторе:

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}

Теперь вы можете добавлять разметку и стили внутри Shadow DOM с помощью свойства innerHTML:

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        p { color: red; }
      </style>
      <p>Текст внутри Shadow DOM</p>
    `;
  }
}

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

HTML Templates

HTML Templates позволяют определить блоки разметки, которые не отображаются на странице, пока не будут активированы с помощью JavaScript. Они идеально подходят для определения структуры Custom Elements.

Чтобы создать HTML Template, используйте тег <template>:

<template id="my-custom-element-template">
  <style>
    p { color: blue; }
  </style>
  <p>Текст из HTML Template</p>
</template>

Для использования этого шаблона в Custom Element, найдите его с помощью querySelector() и клонируйте содержимое в Shadow DOM:

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.querySelector('#my-custom-element-template');
    const content = template.content.cloneNode(true);
    shadow.appendChild(content);
  }
}

Теперь, когда вы знакомы с основными технологиями Web Components, вы можете начать создавать свои собственные элементы и использовать их на вашем сайте. Это поможет сделать ваш код более модульным, удобным для повторного использования и легким для поддержки. Удачи в создании уникальных сайтов с использованием Web Components! 😊

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее