Webcomponents v1 - 非法构造函数

尝试webcomponents，但得到了一个错误，我没有得到。Webcomponents v1 - 非法构造函数

标记很简单，应该工作。 2个文件，都是html文件。

错误标记在控制台上的<script>标记中。

感谢您的任何帮助。

PS。我正在运行Google Chrome Beta以使customElements正常工作。

公里button.html

<script> 

class KmButton extends HTMLButtonElement { 

    constructor() { 
    super(); 
    } 

} 

customElements.define('km-button', KmButton, {extends: 'button'}); 

</script>

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <!-- import webcomponents --> 
     <link rel="import" href="./components/km-button.html"> 
    </head> 
    <body> 
     <km-button>hej</km-button> 
    </body> 
</html>

错误

km-button.html:1 Uncaught TypeError: Illegal constructor(…)KmButton @ km-button.html:7

来源

2016-09-21 Björn Hjorth

似乎我错了<km-button></km-button>标记它应该是<button is="km-button">some text</button>当您扩展另一个DOM元素。

如果有人在同一个错误中运行，请留下问题。

来源

2016-09-21 21:01:08

实际上它仍然没有工作（更正后）。

AFAIK extends功能尚未在Custom Elements v1 for Chrome中实现。

因此，is=语法简单地（并且默默地）被忽略，并且您的按钮被视为标准<button>。

来源

2016-09-22 08:02:31 Supersharp

嗯好吧，只是觉得它工作，因为它不再给出错误，最终没有使用** is = **语法，因为它似乎苹果公司不会在Webkit中实现它。但谢谢你让我知道。 –

解决方法是使用此polyfill：https：//github.com/WebReflection/document-register-element – Supersharp

感谢您的链接，但我不认为在开发过程中添加polyfill是一种好的做法，他们只能在最终用户在“End”完成buildtask时使用。 –

Webcomponents v1 - 非法构造函数

回答

相关问题