【发布时间】：2018-05-12 08:21:58
【问题描述】：
我正在使用 ES5 制作一个扩展 HTMLAnchorElement 的自定义 Web 组件。由于 Web 组件仅在 ES6 及更高版本中工作，我已包含位于 here. 的 ES5 polyfill
制作一个扩展 HTMLElement 的 Web 组件，然后在页面上使用它的标签可以正常工作。但扩展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 永远不会被触发。
链接就像一个普通的锚链接一样工作，就好像它从未被扩展过一样。
我在这里做错了什么？
【问题讨论】：
-
这些都不对。第一，您不能扩展特定元素，只能扩展 HTMLElement。 2、你为什么在最新的chrome中使用带有适配器的ES 5？使用规范要求的类。将您链接的 shim 和 babel 用于旧浏览器。旁注：connectedCallback 过早触发有问题，我通常将内容包装在 0 的
setTimeout中。有关更多信息，请参阅 this。 -
@JaredSmith 我实际上在使用 Kotlin，这就是我需要 ES5 适配器的原因。我几乎向你们展示了 Kotlin 编译器输出的内容。最后，您可以扩展特定元素。它是规范的一部分。我建议你做一些阅读以加快速度。
-
@JaredSmith 给你，这是你需要阅读的内容：w3c.github.io/webcomponents/spec/custom/…
-
我的立场是正确的。有一个+1。但是它没有实现（或者如果它在标志后面），在 Chrome 62 中调用
class Foo extends HTMLButtonElement会引发非法构造函数错误。我还建议不要尝试在JavaScript 以外的语言，除非它是 POC：很难说在这个过程中哪里出了问题。我可以从痛苦的个人经历告诉你，全新的东西（例如模块、本地自定义元素）的 devtools 错误消息比它们更陈旧的对应物更不透明。 -
感谢您的建议。我刚刚尝试从我发布的链接中运行示例，看来您是对的。感谢您的帮助。
标签： javascript html web-component