javascript - 扩展 HTML 元素

Question

我正在使用 ES5 制作一个扩展 HTMLAnchorElement 的自定义 Web 组件。由于 Web 组件只能在 ES6 及更高版本中工作，因此我包含了位于 here. 的 ES5 polyfill

创建一个扩展 HTMLElement 的网络组件，然后在页面上使用它的标签就可以了。但是扩展 HTMLElement 以外的任何元素似乎都不起作用。

我正在使用最新版本的谷歌浏览器对此进行测试。

下面是我为扩展 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'});

下面是创建元素并将其添加到 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)

下面是 DOM 中显示的内容，看起来是正确的:

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

控制台中没有显示任何错误，但是当元素附加到 DOM 时，永远不会触发 connectedCallback。

该链接就像一个普通的 anchor 链接一样工作，就好像它从未被扩展过一样。

我在这里做错了什么？

Answer 1

截至 2017 年 11 月 28 日，除了 HTMLElement 之外，还扩展了任何内容任何浏览器都不支持。 <button is="my-button">Click Me</button>的思路|在 native V1 组件中不受支持。

有关更多信息，请阅读 Extending native HTML elements 部分在这里找到:https://developers.google.com/web/fundamentals/web-components/customelements

它指出:“警告:在撰写本文时，还没有浏览器实现自定义内置元素(状态)。这对于可访问性和渐进式增强来说是不幸的。如果您认为扩展 native HTML 元素有用，请在 Github 上表达您的想法。”

更新 1:

截至 2018 年 5 月 28 日，Chrome 67 支持自定义内置元素Firefox 63 也声称完全支持。

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.