Как использовать веб-компоненты для создания градиентных переходов

1656517225 kak ispolzovat veb komponenty dlya sozdaniya gradientnyh perehodov

автор Энтони Нг

В этой статье мы узнаем о веб-компонентах. Мы создадим простой веб-компонент, изменяющий цвет градиента.

Веб-компоненты – это набор различных технологий, позволяющих создавать пользовательские элементы для многократного использования. Использование специального элемента ничем не отличается от использования a <div />. Вы можете создавать экземпляры в своем HTML. Вы можете создать экземпляр с помощью JavaScript. Вы можете подключить прослушиватели событий к пользовательским элементам.

Вы когда-нибудь смотрели на спецификации HTML и полагали, что авторы оставили важный элемент? Это решение для вас. Пользовательские элементы дают разработчикам возможность создавать собственные полнофункциональные элементы DOM.

Разница между пользовательскими элементами и веб-компонентами?

Многие используют термины Custom Elements и Web Components как взаимозаменяемые. Веб-компоненты – это набор различных технологий, включающий пользовательские элементы, теневой DOM и импорт HTML. Custom Elements имеет собственные спецификации (см. здесь).

zOs1VT88fIUcs85VeNqhgfE69BP2c0pxbXV0
Веб-компоненты – это набор технологий; Пользовательские элементы, теневой DOM и импорт HTML.

Веб-компоненты представляют собой родную функцию браузера. Для использования этой функции не требуются внешние библиотеки. Вы можете просмотреть таблицу поддержки браузера с поддержкой браузера.

l40i29nr1vsn2E0ECU8eeDMXXO-je7YDEi4-
Поддержка браузера для веб-компонентов. https://www.webcomponents.org/

Вы можете увидеть поддержку пользовательских элементов здесь.
Вы можете увидеть поддержку шаблонов здесь.
Вы можете увидеть поддержку Shadow DOM здесь.

Итак, это React?

React и веб-компоненты решают разные проблемы. Вебкомпоненты обеспечивают прочную инкапсуляцию для компонентов, которые можно использовать повторно. React предоставляет декларативную библиотеку, поддерживающую синхронизацию DOM с вашими данными.
React не делает разницы между нативным элементом HTML и веб-компонентом. Он будет обрабатывать ваш специально созданный веб-компонент как обычный элемент HTML.

Просмотрите этот пример программы React, использующей веб-компонент.

Документация React также показывает, как можно использовать React в своих веб-компонентах. Я не нашел сценария, который оправдал бы импорт React.

Давайте перенесем градиентные фоны

Мы собираемся создать градиентный веб-компонент, как показано ниже.

gxsEyj4zN7CzzZcjB12Rc0VqRnJ7BPAI4K9v
Градиентные переходы

Обратите внимание на то, как он переходит между градиентным фоном. Мы не можем переносить фоны по умолчанию. Смотрите Codepen здесь.

Но мы можем изменить непрозрачность. Смотрите Codepen здесь.

Мы можем использовать это с помощью псевдоклассов CSS, чтобы получить желаемый эффект. Смотрите Codepen здесь.

Мы можем использовать это с помощью псевдокласса CSS «before», чтобы получить желаемый эффект. Смотрите Codepen здесь.

Fwq5p4QWSluZOlDi0swvtRhB5OgkvTZi1uYp
Элемент div имеет непрозрачность 1; псевдокласс перед элементом имеет непрозрачность.

Есть слой (<div />) с градиентным цветом. Есть второй лayer (div::раньше) с другим градиентным цветом. Этот второй слой лежит поверх первого слоя.d has opacity: 0. Чтобы начать градиентный переход, мы изменяем непрозрачность второго слоя с 0 в 1. Это дает нам эффект перехода градиента.

Как разработчику, вы должны знать об этом многое. Не было бы хорошо иметь простой декларативный способ использования этого градиента? Представьте элемент HTML под названием <my-gradient-background />. Это accepts a grатрибут adient, принимающий цвет градиента, например красный, белый, синий. Когда мы меняемсяe the gradient цвет градиента изменится так, как мы хотим. Это то, что мы собираемся сделать.

Создание веб-компонента

rZpCINGKIpc-T3QSPW9vyG1qsY5ddnvPgfDs

Чтобы создать новый веб-компонент, мы объявляем новый класс, расширяющий HTMLElement.

-QNrmEl0ncCgR7hs2Gs5v79faJeAdlD61Igr

Если вы хотите расширить функциональность существующего HTML элемента, вы можете расширить его вместо этого. Например, чтобы расширить функциональность a <p />, вы б extend HTMLParagraphEкрик.

E3Kxs-MK46C6uWdc9aDOPDOdPbgydwchYS6N

Мы присоединяем теневой корень к нашему веб-компоненту. Теневой DOM API позволяет нам присоединить DOM к нашему градиентному элементу. Эта теневая DOM инкапсулирована в нашем компоненте и (в общем) скрыта от остальных DOM. Вы можете прочитать больше о Shadow DOM здесь.

m64g8vpFm9ryWuGMy8yGP6exiFMX3QO6YKXa

В нашей теневой DOM мы добавляем некоторые стили для элемента градиента. Мы используем a <div class=”after” /> вместо псевдоэлемента здесь. Это потому, что мы хотим ссылаться на этот слой с помощью JavaScript. Мы не можем ссылаться на псевдоэлементы с помощью JavaScript.

3DTLIwfMdYlbxTYpNhwDHgFzQeaW2cSOgLnQ

The host element – ​​это сам элемент градиента. Мы можем стилизовать его так, будто это было <div /> элемент.

u1gafpfh9Rs2nKyz1w4wKHRryJQIZhkrSzDM

В наблюдаемых атрибутах мы возвращаем список атрибутов HTML, которые мы хотим просмотреть. При изменении этих наблюдаемых атрибутов наша функция обратного вызова запускается.

BnywZqFz6WTW-QUPfsr1IIkMH8ctQ4tY8dOw

Наши attributeChangedCallback функция запускается каждый раз, когда изменяется наблюдаемый атрибут. В нашей функции обратного вызова мы получаем 3 довода. Первый аргумент – это name изменившегося атрибута. Второй аргумент – это значение атрибута до его изменения. Третий аргумент – это значение атрибута после его изменения.

В нашей функции обратного вызова мы обновляем наш элемент после.

UQ0BA-ZKRmrMonVL2bIWdkzg9xv7g-OyICxZ
PvW7g04cINRkGMvdr1XOL0IavdS38Wuw9Pc5

Мы обновляем цвет фона нашего элемента после нового цвета градиента. Мы также устанавливаем его непрозрачность на 1. Наш элемент после начнет исчезать, создавая желаемый эффект. Мы хотим сделать некоторый код очистки, когда элемент «после» закончит исчезновение.

m6OuFsRHdn1iKcDvuJSrM5f99j4-duDsXlt1
U9YmQyTr8NLJeRMYDDL0LVLbnxQRszJCJ4-r

Наш элемент «после» выполняет всю работу по созданию эффекта градиентного перехода. Мы устанавливаем для нашего элемента «хост» новый цвет градиента. Мы скрываем элемент после, чтобы он был готов к следующему исчезновению. Это все, что нужно очистить.

YF6prxikn49jklX7vUfzp9O3PePGQ5FBs7Av

Чтобы использовать этот новый веб-компонент, мы должны определить его следующим образом.

Теперь вы сможете использовать <my-gradient-background /> как обычный элемент HTML.

Вы можете просмотреть полный код здесь. Не стесняйтесь скачивать его с помощью npm install — save my-gradient-background.

Ссылки

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *