logoalt Hacker News

typedef_struct05/03/20252 repliesview on HN

You could start with something like this:

    customElements.define('html-import', class extends HTMLElement {
        connectedCallback() {
            const href = this.getAttribute('href')
            const fetch = new XMLHttpRequest()
            fetch.responseType = 'document'
            fetch.addEventListener('readystatechange', (function onfetch(e) {
                if (fetch.readyState !== XMLHttpRequest.DONE) return
                const document = fetch.response.querySelector('body') ?? fetch.response
                this.replaceWith(document)
            }).bind(this))
            fetch.open('GET', href)
            fetch.send()
        }
    })

Replies

johnfn05/03/2025

Well, that's not "HTML alone".

show 1 reply
_benton05/04/2025

In one line

customElements.define("include", class extends HTMLElement { connectedCallback() { fetch(this.getAttribute("href")).then(x => x.text()).then(x => this.outerHTML = x) } })