Question

我正在使用ES5制作扩展HTMLAnchorElement的自定义网络组件。由于Web组件仅适用于ES6及更高版本，因此我将ES5 polyfill包含在here.

中

制作一个扩展HTMLElement然后在页面上使用其标记的Web组件可以正常工作。但扩展HTMLElement以外的任何元素似乎都不起作用。

我正在使用最新版本的Google Chrome进行测试。

以下是扩展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以外的任何内容。 Native V1组件不支持<button is="my-button">Click Me</button>的想法。

有关详情，请参阅此处的Extending native HTML elements部分：https://developers.google.com/web/fundamentals/web-components/customelements

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

更新1：

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

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

扩展HTML元素

1 个答案: