Extending an HTML Element

I am using ES5 to make a custom web component that extends HTMLAnchorElement. Since web components only work in ES6 and up I have included the ES5 polyfill located here.

Making a web component that extends HTMLElement and then using its tag on the page works fine. But extending any element other than HTMLElement does not seem to work.

I am using the latest version of Google Chrome to test this.

Below is my code for the element that is extending HTMLAnchorElement.

function CustomAnchor() {
    HTMLAnchorElement.call(this);
}

CustomAnchor.prototype.connectedCallback = function () {
    console.log('anchor added to dom');

    this.addEventListener('click', 
        function(e) {
            console.log('test');
            e.preventDefault();
            var result = confirm('Confirmed!');
        }
    );
};

window.customElements.define('custom-anchor', CustomAnchor, {extends: 'a'});

And here is the code that creates the element and adds it to the DOM:

var el1 = document.createElement("a")
el1.setAttribute("is", "custom-anchor")
el1.setAttribute("href", "http://www.google.com/")
el1.text = "Go to Google"
document.body.appendChild(el1)

And here is what shows up in the DOM, which looks correct:

<a is="custom-anchor" href="http://www.google.com/">Go to Google</a>

No errors are showing up in the console but when the element is appended to the DOM the connectedCallback is never fired.

The link works just like a normal anchor link as if it had never been extended.

What am I doing wrong here?