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

Making a web ponent 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", "/")
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="/">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?

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

Making a web ponent 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./")
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./">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?

• javascript
• html
• web-ponent

• 1 None of this is correct. 1st, you cannot extend specific elements, just HTMLElement. 2nd, why are you using ES 5 with the adapter in the latest chrome? Use classes like the spec requires. Use the shim you linked and babel for old browsers. Side note: I have trouble with the connectedCallback firing too early, I usually wrap the contents in a setTimeout of 0. See this for more info. – Jared Smith Commented Nov 28, 2017 at 19:31
• 1 @JaredSmith I'm actually using Kotlin which is why I need the ES5 adapter. I'm showing you guys almost exactly what the Kotlin piler outputted. Lastly, you can extend specific elements. It is part of the spec. I suggest you do some reading to bring yourself up to speed. – Graham Commented Nov 28, 2017 at 19:37
• 1 @JaredSmith here you go, this is what you need to read: w3c.github.io/webponents/spec/custom/… – Graham Commented Nov 28, 2017 at 19:43
• 2 I stand corrected. Have a +1. However its not implemented (or if it is it's behind a flag), doing class Foo extends HTMLButtonElement throws an illegal constructor error on the call to super in Chrome 62. I would also advise against trying to do bleeding-edge browser stuff in a language other than JavaScript unless its a POC: too hard to tell where in the process something went wrong. I can tell you from painful personal experience that the devtools error messages for brand new stuff (e.g. modules, native custom elements) are more opaque than their more well-worn counterparts. – Jared Smith Commented Nov 28, 2017 at 19:46
• Thanks for the suggestion. I just tried running the example from the link I posted and it appears that you're right. Thanks for the help. – Graham Commented Nov 28, 2017 at 19:56

1 Answer 1

As of Nov 28, 2017 extending anything besides HTMLElement is not supported in any browser. The idea of <button is="my-button">Click Me</button> is not supported in Native V1 ponents.

For more info read the section Extending native HTML elements found here: https://developers.google./web/fundamentals/web-ponents/customelements

it states: "Warning: At time of writing, no browser has implemented customized built-in elements (status). This is unfortunate for accessibility and progressive enhancement. If you think extending native HTML elements is useful, voice your thoughts on Github."

UPDATE 1:

As of May 28 2018 Chrome 67 supports Customized built-in elements And Firefox 63 claims full support too.

Sometime in Sept or Oct 2018 MS started working on their support for Custom Elements and Shadow DOM in Edge. But there is no indication on when it will be finished.