TL; DR; Тонкая оболочка веб-компонентов + великолепные шаблоны JavaScript.
Возвращение ‹marquee›
Веб-компоненты позволяют нам создавать собственные HTML-теги и делиться ими с другими.
Чтобы разобраться с LitElement (базовый класс, который мы расширяем, чтобы дать нам некоторые полезные функции), давайте вернем тег <marquee>
после того, как он устарел в HMTL5.
Все пользовательские элементы должны содержать дефис, поэтому мы не можем переопределить <marquee>
, но можем сделать <new-marquee>
.
Для тех, кто слишком молод, чтобы помнить, тег <marquee>
использовался для прокрутки текста по экрану, что обычно используется для новостей. Чтобы переделать это, нам нужно создать элемент, принимающий текст в light DOM, и заставить его прокручиваться.
Настройка проекта
npm init
Дайте вашему проекту имя и т. Д., А затем установите наши зависимости:
npm i --save @polymer/lit-element npm i --save @webcomponents/webcomponentsjs npm i --save-dev polyserve npm i --save-dev webpack npm i --save-dev webpack-cli
Создание нашего элемента
Шаблон для нашего элемента приведен ниже:
import { LitElement, html } from '@polymer/lit-element'; class NewMarquee extends LitElement { constructor() { super(); } static get properties() { return {} } _render(properties) { return html` <div><slot></slot></div> `; } } window.customElements.define('new-marquee', NewMarquee);
Кратко повторяя вышесказанное, мы импортируем базовый класс LitElement, добавляем функцию рендеринга, в которую мы поместим наш HTML, и, наконец, определяем новый элемент.
Позже мы увидим, что делает тег<slot>
.
Помеченные шаблоны
TL; DR; функция html
в render
принимает шаблон в качестве входных данных и преобразует его, выполняя некоторые умные вещи.
Главная страница HTML
Поскольку веб-компоненты являются частью веб-спецификации, использовать их очень просто:
<html> <body> <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script> <new-marquee>My text here</new-marquee> <script type="module" src="dist/main.js" crossorigin></script> </body> </html>
К сожалению, мы ссылаемся на LitElement по имени пакета, и, поскольку браузеры не знают, как с этим справиться, мы будем использовать Webpack, чтобы сделать за нас тяжелую работу:
//webpack.conf.js module.exports = { entry : './new-marquee.js', output : { filename : 'main.js', }, mode : 'development' };
Чтобы упростить жизнь, давайте добавим несколько скриптов в package.json:
"serve": "polyserve", "webpack": "webpack --config webpack.conf.js", "start": "npm run-script webpack && npm run-script serve",
Мы используем Polyserve как простой сервер (подойдет любой) и Webpack для упаковки нашего JS.
Чтобы увидеть наш код в действии:
npm start
Затем перейдите на страницу, отображаемую в командной строке. Заметили, что текст, который мы помещаем в наш новый элемент, появляется на экране? Элемент <slot>
позволяет нам использовать любые элементы, помещенные внутрь нашего пользовательского.
Реализация Marquee
Пока что наш элемент мало что делает. Нам нужно заставить текст прокручиваться и добавить немного CSS. В исходной спецификации для <marquee>
также были некоторые атрибуты, поэтому мы добавим один для демонстрационных целей.
static get properties(){ return { loop: {type: Number} } }
Выше мы добавили атрибут loop
к нашему элементу, давайте обновим наш HTML, чтобы он соответствовал:
<new-marquee loop="2">My text here</new-marquee>
Наконец, давайте добавим немного CSS:
_render(properties) { return html` <style> :host { display: block; padding: 10px; height: 50px; line-height: 50px; overflow: hidden; } div { transform: translateX(100%); animation-name: scroll-left; animation-duration: 20s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: ${properties.loop > 0 ? properties.loop : 'infinite'}; } @keyframes scroll-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } </style> <div><slot></slot></div> `; }
:host
CSS применяется к самому элементу на верхнем уровне. Затем мы определяем анимацию, чтобы содержимое <slot>
перемещалось.
Умная часть - это шаблон. Внутри него вы можете использовать JS-выражения ${}
для изменения поведения элемента. Мы читаем свойство цикла и используем его для изменения итераций выделения.
Теперь запустите npm start
и ощутите славу веб-сайта из 90-х.
# вставьте сюда сотни анимированных GIF #