HTML5: Erstellen Sie ein benutzerdefiniertes Element

Ich versuche ein benutzerdefiniertes Element zu erstellen, das eine Funktion hat, die von Jscript aufgerufen werden kann, aber ich kann es nicht funktionieren und nicht sehen, was falsch ist ... Mein Code:HTML5: Erstellen Sie ein benutzerdefiniertes Element

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

ich excpted, dass foo() würde und „foo“ Warnung angezeigt wird genannt, sondern foo() nicht definiert ist, wenn ich es nennen. Kann mir jemand zeigen, was falsch daran ist?

(ich weiß, dass ich Klasse verwenden sollte/verlängern und customElements.define, aber dies muss auf älteren Browsern laufen)

Dank!

Quelle

2017-11-30 user2429124

Verwenden Sie den V1-Stil von Webkomponenten, und verwenden Sie die Polyfills. Diese arbeiten zurück zu IE11 (solange Sie die 'custom-elements-es5-adapter.js' für jeden Code verwenden, der auf ES5 übertragen wird. Es ist jedoch am besten, nur für IE11 zu transpilieren. – Intervalia

document.registerElement ist deprecated zugunsten customElements.define(). document.registerElement ist veraltet, noch bevor die meisten Browser das wussten.

Daher sollte Ihr aktueller Code in den meisten Fällen nicht funktionieren. Neue Möglichkeit, ein eigenes Element ist-

schaffen

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

Derzeit Chrome unterstützt dies. Andere kommen.

Benutzerdefinierte Elemente, die ältere Browser unterstützen können, können mit Polymer erstellt werden.

Quelle

2017-12-25 18:30:58

HTML5: Erstellen Sie ein benutzerdefiniertes Element

Antwort

Verwandte Themen