扩展 HTML 元素

Question

我正在使用 ES5 制作一个扩展HTMLAnchorElement. 由于 Web 组件仅适用于 ES6 及更高版本，因此我在此处包含了 ES5 polyfill 。

制作一个扩展的 web 组件，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它永远不会被触发。

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

我在这里做错了什么？

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

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

更新1：

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

2018 年 9 月或 10 月的某个时候，MS 开始致力于在 Edge 中支持自定义元素和 Shadow DOM。但没有任何迹象表明它何时完成。