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?
