Skip to content

Instantly share code, notes, and snippets.

@leodido
Last active May 31, 2016 09:19
Show Gist options
  • Save leodido/8a5aa2b1b3a84e190798 to your computer and use it in GitHub Desktop.
Save leodido/8a5aa2b1b3a84e190798 to your computer and use it in GitHub Desktop.
ES2015 class skeleton for Polymer elements
'use strict';
let behaviors = Symbol('behaviors')
const SkeletonPolymerBehavior = {
// Define your behavior
};
class SkeletonPolymer {
// Define behaviors with a getter
/*
// Simple version
get behaviors() {
return [SkeletonPolymerBehavior];
}
*/
// Version needed when including behaviors including other behaviors
get behaviors() {
if (!this[behaviors]) {
this[behaviors] = [Polymer.NeonAnimationRunnerBehavior];
}
return this[behaviors];
}
// Polymer allows a behavior to be an array or an object.
// It flattens nested behaviors into a single array containing only objects and sets it on the prototype.
// We need a setter to retain our flattened behaviors list
set behaviors(value) {
this[behaviors] = value;
}
// Element setup goes in beforeRegister() instead of created() callback
beforeRegister() {
this.is = 'skeleton-polymer';
// To extend a native HTML element set the extends property on the prototype to the tag name of the element to extend
// this.extends: 'input'
// Define the properties object in beforeRegister()
this.properties = {
top: {
type: String,
value: ''
},
bottom: {
type: String,
value: ''
}
}
this.listeners = {
'neon-animation-finish': '_onNeonAnimationFinish'
}
// this.observers
}
// Define other lifecycle methods as you need
registered() {
// Perform one-time initialization when an element is registered (primarily useful when implementing behaviors)
}
created() {}
ready() {
this.top = this.top.toUpperCase();
this.bottom = this.bottom.toUpperCase();
}
factoryImpl() {
// Method only invoked when creating an element using the construcotr (e.g., new ABC)
// Method not used if the element is created by markup or via document.createElement
// Method called after the element initialisation (local DOM created, default values set, ...)
}
attached() {}
detached() {}
attributeChanged() {}
}
// Define and register the element using polymer's constructor (which returns a basic constructor)
Polymer(SkeletonPolymer);
// Set the custom element's prototype chain but not register it immediately
// It returns a constructor that can be passed to document.registerElement
// Polymer.Class(SkeletonPolymer)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment