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 - 非法構造函數

回答

相關問題