Skip to content

Instantly share code, notes, and snippets.

@deebloo
Last active December 28, 2017 05:29
Show Gist options
  • Save deebloo/b06d80e89a7165a8e479 to your computer and use it in GitHub Desktop.
Save deebloo/b06d80e89a7165a8e479 to your computer and use it in GitHub Desktop.
Its extremely easy to create vanilla custom elements with classes and template strings.
'use strict';
class NameCard extends HTMLElement {
set name(val) {
this._name = val;
this.render();
}
get name() {
return this._name;
}
set jobTitle(val) {
this._jobTitle = val;
this.render();
}
get jobTitle() {
return this._jobTitle;
}
createdCallback() {
this.render();
}
attributeChangedCallback() {
this._name = this.getAttribute('name');
this._jobTitle = this.getAttribute('job-title');
this.render();
}
// Very simple for simple things. but this is where you would your diffing and more complex rendering business
render() {
this.innerHTML = this.template();
}
template() {
return `
<h3>${this.name}</h3>
<p>${this.jobTitle}</p>
`;
}
}
export default document.registerElement('name-card', NameCard);
@argyleink
Copy link

That is so tasty

@deebloo
Copy link
Author

deebloo commented Mar 4, 2016

thanks! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment