Автор оригинала: FreeCodeCamp Community Member.
Энтони Нг
В этой статье мы узнаем о веб-компонентах. Мы построим простой веб-компонент, который переходит на его градиент.
Веб-компоненты – это набор различных технологий, которые позволяют вам создавать многоразовые пользовательские элементы. Использование пользовательского элемента не отличается от использования A
Вы когда-нибудь смотрели на HTML-спецификации и думали, что авторы оставили важный элемент? Это решение для вас. Пользовательские элементы обеспечивают способ разработчикам создавать свои собственные полнофункциональные элементы DOM.
Разница между пользовательскими элементами и веб-компонентами?
Многие используют термины пользовательских элементов и веб-компонентов взаимозаменяемо. Веб-компоненты представляют собой набор различных технологий, которые включают пользовательские элементы, тени DOM и импорт HTML. Пользовательские элементы имеют свои собственные спецификации ( Смотрите здесь ).
Веб-компоненты являются нативной особенностью браузера. Вам не нужны внешние библиотеки для использования этой функциональности. Вы можете увидеть таблицу поддержки браузера здесь, помеченная поддержка браузера Отказ
Вы можете увидеть поддержку пользовательских элементов здесь. Вы можете увидеть поддержку шаблонов здесь. Вы можете увидеть поддержку Shadow Dom здесь.
Так что это реагирует?
Реагистрационные и веб-компоненты решают различные проблемы. Веб-компоненты обеспечивают прочную инкапсуляцию для многоразовых компонентов. РЕАКТ обеспечивает декларативную библиотеку, которая сохраняет DOM в синхронизации с вашими данными. Реагирование не имеет дифференцировки между нативным HTML-элементом и веб-компонентом. Он будет обрабатывать ваш пользовательский веб-компонент, как он делает нормальный HTML-элемент.
См. Этот пример приложения React с использованием веб-компонента.
Документация RACT также показывает, как вы можете использовать реагирование в ваших веб-компонентах. Я не нашел сценарий, который будет гарантировать импорт реагировать.
Давайте Переходные градиентные фоны
Мы собираемся создать веб-компонент градиента, как приведенный ниже.
Обратите внимание, как он переходит между градиентными фонами. Мы не можем переходить фоны по умолчанию. Смотрите кодепен здесь Отказ
Но мы можем перейти непрозрачность. Смотрите кодепен здесь Отказ
Мы можем воспользоваться этим с помощью CSS Pseudo-классов, чтобы получить желаемый эффект. Смотрите кодепен здесь Отказ
Мы можем воспользоваться этим с помощью CSS «перед» псевдо-классом, чтобы получить желаемый эффект. Смотрите кодепен здесь Отказ
Есть слой ( Ayer (Div:: до) с другим градиентом цветом. Этот второй слой сидит на верхней части первого слоя D имеет OPAC ity: 0. Чтобы начать переход градиента, переходим непрозрачность второго слоя от 0 до 1. Это дает нам эффект, который градиент переходит.
Как разработчик, это много вещей, о которых вы должны знать. Не было бы неплохо иметь простой, декларативный способ использования этого градиента? Представьте себе элемент HTML под названием <Мой градиент - фон />. Это ACCE PTS GR Удачный атрибут, который принимает градиентный цвет, как «красный, белый, синий». Когда мы меняем г гр Удар, цвет градиента переходит, как мы хотим. Это то, что мы собираемся создавать.
Создание веб-компонента
Чтобы создать новый веб-компонент, мы объявляем новый класс, который расширяет HTMLELEMENT.
Если вы хотите продлить функциональность существующего элемента HTML, вы можете простираться от них вместо этого. Например, чтобы расширить функциональность A xtend htmlparaphee лент.
Мы прикрепляем корень тени до нашего веб-компонента. Shadow DOM API позволяет нам прикрепить Дом к нашему градиенту. Эта тень DOM инкапсулирована в нашем компоненте и составляет (вообще) спрятана от остальной части DOM. Вы можете узнать больше о Shadow Dom здесь Отказ
В нашей тени DOM мы добавляем некоторую стайлинг для элемента градиента. Мы используем
хозяин Элемент – это сам градиентный элемент. Мы можем стиль это, как будто это было
В наблюдаемых атрибутах мы возвращаем список атрибутов HTML, которые мы хотим посмотреть. Когда эти наблюдаемые атрибуты меняются, наша функция обратного вызова будет огонь.
Наше AttributeChangedCallback Функция пожара всякий раз, когда наблюдаемые изменения атрибута. Мы получаем 3 аргумента в нашем обратном вызове. Первый аргумент – это Имя атрибута, который изменился. Второй аргумент – это значение атрибута, прежде чем он изменился. Третий аргумент – это значение атрибута после того, как он изменился.
В нашем функции обратного вызова мы обновляем наш элемент «после».
Мы обновляем наш цвет фона «после» элемента с новым градиентом. Мы также устанавливаем его непрозрачность на 1. Наш элемент «после» начнет выцветать, создавая наш желаемый эффект. Мы хотим сделать какой-то код очистки Когда элемент «после» завершил выцветание.
Наш элемент «после» выполняет всю работу по созданию эффекта градиента. Мы устанавливаем наш элемент «Host» на новый градиентный цвет. Мы скрываем элемент «после», чтобы он был готов к следующему исчезновению. Это все, что мы нуждаемся.
Чтобы использовать этот новый веб-компонент, мы должны определить это так.
Теперь вы сможете использовать <Мой градиент - фон /> Как нормальный HTML-элемент.
Вы можете просмотреть полный код здесь Отказ Не стесняйтесь скачивать его с помощью NPM Установить - Сохранить мой градиент-фон Отказ
использованная литература
- https://developers.google.com/web/fundamentals/web-components/customelements
- https://www.webcomponents.org/introduction
- https://developer.mozilla.org/en-US/docs/Web/Web_Components
- https://reactjs.org/docs/web-components.html
- https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements
- https://w3c.github.io/webcomponents/spec/custom/#custom-elements
Оригинал: “https://www.freecodecamp.org/news/use-web-components-to-create-gradient-transitions-f9aad648824a/”