[рони]

Lefseq,
на основе варианта от Malleys,
https://javascript.ru/forum/dom-wind...tml#post514440

<text-display>
    <img src="https://picsum.photos/300/100?1">
    <img src="https://picsum.photos/300/100?2">
    <img src="https://picsum.photos/300/100?3">
    <img src="https://picsum.photos/300/100?4">
    <img src="https://picsum.photos/300/100?5">
    <img src="https://picsum.photos/300/100?6">
    <img src="https://picsum.photos/300/100?7">
    <img src="https://picsum.photos/300/100?8">
    <img src="https://picsum.photos/300/100?9">
</text-display>

<style>

text-display {
    background: linear-gradient(to bottom, #333, black);
    background-color: #111;
    color: white;
    font: 900 1em / 1.5 monospace, system-ui;
    border-radius: 0.2em;
    white-space: nowrap;
    margin: 0.2em 0;
    width: 300px;
    height: 250px;
}

</style>

<script>

class TextDisplay extends HTMLElement {
    constructor() {
        super();

        const shadow = this.attachShadow({ mode: "closed" });
        const document = shadow.ownerDocument;
        const firstElement = document.createElement("div");
        const secondElement = document.createElement("div");
        const slot = document.createElement("slot");
        const observer = new MutationObserver(mutationHandler);

        shadow.innerHTML = `<style>
            :host {
                display: flex;
                overflow: hidden;
                flex-direction: column;
            }
            :host > div {
                min-width: 100%;
                will-change: transform;
                animation: text-display var(--text-display-duration, 15s) linear infinite;
                animation-direction: inherit;
                display: flex;
                flex: 1 0 auto;
                text-align: center;
                flex-direction: column;
            }
            :lang(ar), :lang(he) {
                animation-direction: reverse;
            }
            @keyframes text-display {
                to {
                    transform: translateY(-100%);
                }
            }
        </style>`;

        firstElement.append(slot);
        shadow.append(firstElement, secondElement);
        mutationHandler();

        observer.observe(this, {
            subtree: true,
            characterData: true,
            attributes: true,
            childList: true
        });

        function mutationHandler() {
            secondElement.textContent = "";

            for(const assignedNode of slot.assignedNodes())
                secondElement.append(assignedNode.cloneNode(true));
        }
    }
}

customElements.define("text-display", TextDisplay);

</script>