Slide 40
Slide 40 text
CUSTOM MARKUP
Custom Elements v0 Custom Elements v1
var MyElement = document.registerElement(
'hey-there',
{
prototype: Object.create(
HTMLElement.prototype, {
createdCallback: { value: function() {
console.log('registered');
}},
attachedCallback: { value: function() {
console.log('live on DOM :-)');
}},
detachedCallback: { value: function() {
console.log('leaving the DOM :-(');
}},
attributeChangedCallback: {value: function(
name, previousValue, value
) {}}
})
}
);
class HeyThere extends HTMLElement {
constructor() {
super();
console.log('registered');
}
connectedCallback() {
console.log('live on DOM :-)');
}
disconnectedCallback() {
console.log('leaving the DOM :-(');
}
attributeChangedCallback() {}
}
customElements.define('hey-there', HeyThere);
http://codepen.io/stefanjudis/pen/ZpZzmY http://codepen.io/stefanjudis/pen/dpvyok