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 #