Skip to content

02 Web Components

Jump to bottom
Roberto Ferranti edited this page Mar 19, 2026 · 1 revision

✍️ Write the component

class Instant extends ftl.ParsedElement {
    #format = new Intl.DateTimeFormat('it-IT', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    });
    async render() {
        const isoInstant = this.innerText.trim();
        this.innerText = this.#format.format(new Date(isoInstant));
    }
}

📜 Configure the registry

ftl.registry
    .defineElement("my-instant", Instant)
    .configure();

✌️ Use the component

<body>
    <my-instant>
        2030-12-10T11:12:13.456
    </my-instant>
</body>

Clone this wiki locally