HTML5：カスタム要素を作成する

Jscriptから呼び出せる機能を持つカスタム要素を作成しようとしていますが、それを動作させることができず、何が間違っているのかわかりません... マイコード：私はそれを呼び出すときに私がfoo（）と呼ばれ、「foo」という警告が表示され、代わりのfoo（）されていることをexcptedうHTML5：カスタム要素を作成する

<html> 
<head> 
<script language="javascript" type="text/javascript"> 

var XFooPrototype = Object.create(HTMLButtonElement.prototype); 
XFooPrototype.foo = function() { 
    alert("foo"); 
} 

document.registerElement('x-foo', { 
    prototype: XFooPrototype 
}); 

document.addEventListener("DOMContentLoaded", function(event) { 
    var mytag = document.getElementById("my_tag"); 
    mytag.foo(); 
}); 

</script> 
</head> 
<body> 
    <x-foo id="my_tag"></x-foo> 
</body> 
</html>

が定義されていません。誰かが私にこのことについて間違っていることを指摘できますか？

は（私は拡張し、customElements.define /クラスを使用する必要があります知っているが、この必要性は、あまりにも古いブラウザ上で動作するように）

感謝を！

出典

2017-11-30 user2429124

WebコンポーネントのV1スタイルを使用し、ポリフィルを使用します。これらは、IE5に変換されたコードに対して 'custom-elements-es5-adapter.js'を使用している限り、IE11に戻っています。 – Intervalia

document.registerElementは、deprecatedであり、customElements.define()が好ましい。 document.registerElementは、ほとんどのブラウザがこれを知る前であっても廃止予定です。

したがって、ほとんどの場合、現在のコードは機能しません。

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <x-foo id="my_tag"></x-foo> 
 

 
    <script language="javascript" type="text/javascript"> 
 
    class MyElement extends HTMLElement { 
 
     constructor() { 
 
     super() 
 
     } 
 
     foo() { 
 
     alert("foo"); 
 
     } 
 
    } 
 
    window.customElements.define('x-foo', MyElement); 
 

 
    document.addEventListener("DOMContentLoaded", function(event)  { 
 
     var mytag = document.getElementById("my_tag"); 
 
     mytag.foo(); 
 
    }); 
 
    </script> 
 

 
</body> 
 

 
</html>

現在クロームIS-カスタム要素を作成するための新しい方法は、これをサポートしています。他は来ている。

旧式のブラウザでサポートできるカスタム要素は、Polymerを使用して作成できます。

出典

2017-12-25 18:30:58

HTML5：カスタム要素を作成する

答えて

関連する問題