use Custom Elements

[hhvdblom]

I use in my application very frequently the same anchor tag that replaces a part of the screen like done in SPA. Is it wise to create a custom element for that like this:

/**
 *  extend anchor element.
 */
 class AHx extends HTMLAnchorElement { 
    constructor() {             
        super();

        // use a standard anchor tag but switch href content with hx-get
        this.setAttribute("hx-get", this.href);

        // to make it work like SPA place loaded content in this tag
        this.setAttribute("hx-target", "#page-content");

        // the anchor must be clickable so give it a fake value
        this.setAttribute("href", "#");

        // content must be placed in history for back button to work
        this.setAttribute("hx-push-url", "true");
    }
 }        

// register the hx a element
customElements.define("a-hx", AHx, { 
    extends: "a" 
});

Then I use this tag in my application html files like this in pug in nodjes:

a(class="btn-link text-reset fw-normal" href="/iam", is="a-hx") Nice to meet you, I am Herman van der Blom

I think this can be very strong because now I am not using any custom attributes in my anchor tag, so it seems like 100% normal HTML
so if the objective is to create "normal" HTML that objective is also met :-)

[snoop244]

I don't think the "is" attribute is supported in Safari (desktop or iOS).... and they seem determined NOT to support it as far as I can tell from their feature tracker.

I was really hoping I could use the approach you provide, but we really need Safari to work.

https://caniuse.com/mdn-html_global_attributes_is

[hhvdblom]

Eventually I solved it without polyfill or custom element.
All my requests are htmx requests with partial views, so I could use a general solution like this for the whole application:

    // use SPA like replacement of content
    document.addEventListener("htmx:beforeRequest", function (evt) {
        evt.detail.target = htmx.find("#page-content");
        evt.detail.href = "#";
        evt.detail.elt.setAttribute("hx-push-url", "true");
    });