Webコンポーネントv1 - 不正なコンストラクタ

Webコンポーネントを試してみましたが、エラーになってしまいました。Webコンポーネントv1 - 不正なコンストラクタ

マークアップは単純で、うまくいくはずです。 2つのファイルは、どちらもhtmlファイルです。

コンソールの<script>タグにエラーが記録されています。

ありがとうございます。

PS。 customElementsを動作させるためにGoogle Chrome Betaを実行しています。

キロ-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

Yeaは、<km-button></km-button>タグと間違えているようです。別のDOM要素を拡張すると、<button is="km-button">some text</button>となっています。

誰かが同じミスで動いた場合に質問を残してください。

出典

2016-09-21 21:01:08

実際にはまだ修正されていません。

AFAIKのextends機能は、Chrome用カスタム要素v1ではまだ実装されていません。

したがって、is=の構文は単純に（サイレントに）無視され、ボタンは標準<button>として表示されます。

出典

2016-09-22 08:02:31 Supersharp

hmm okそれはもはやエラーを出さないので、** is = **構文を使用しないようになったので、AppleはWebkitに実装していないようです。しかし、私に知らせてくれてありがとう。 –

回避策は、このpolyfillを使用することです：https://github.com/WebReflection/document-register-element – Supersharp

リンクをありがとうございますが、私は開発中にpolyfillを追加することは良い方法であり、 "End"でエンドユーザのビルドタスクを実行する場合にのみ使用してください。ライブラリを使用している –

Webコンポーネントv1 - 不正なコンストラクタ

答えて

関連する問題