!!! Listings zum Artikel "Kompetente Puzzleteile"
!!! von Philip Ackermann in iX 1/2015, S. 142
!!! Listing 1
@ü.li:Listing 1:Custom Elements
@li:var prototype = Object.create(HTMLInputElement.prototype);
prototype.createdCallback = function() {
this.type = "checkbox";
this.addEventListener("change", this.showAlert);
};
prototype.showAlert = function(){
alert('selected');
};
var AlertCheckbox = document.registerElement("alert-checkbox", {
prototype: prototype,
extends: 'input'
});
document.body.appendChild(new AlertCheckbox());
!!! Listing 2
@ü.li:Listing 2:Erzeugen eines Shadow DOM
@li:
Shadow DOM
!!! Listing 3
@ü.li:Listing 3:Verwenden eines HTML Import
@li:
HTML Imports
!!! Listing 4
@ü.li:Listing 4:Template und JavaScript für Skill Bar
@li:
!!! Listing 5
@ü.li:Listing 5:Verwenden des Template in HTML
@li:
<Custom Element Beispiel>
!!! Listing 6
@ü.li:Listing 6:Deklarative Definition einer Webkomponente
@li: