Published
Edited
Nov 16, 2019
Insert cell
Insert cell
Insert cell
Insert cell
html`
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/polymer+v2.5.0/components/polymer/polymer.html">
`
Insert cell
Insert cell
Insert cell
html `
<dom-module id="hello-world">
<template>
<p>
Hello World!!
</p>
</template>
</dom-module>`
Insert cell
Insert cell
html `
<script>
HTMLImports.whenReady(function () {
Polymer({
is: 'hello-world'
});
})
</script>
`
Insert cell
Insert cell
html `<hello-world></hello-world>`
Insert cell
Insert cell
Insert cell
html `
<dom-module id="my-life-cycle">
<template>
<p>
Component Lifecycle:<br>
<template is="dom-repeat" items="[[arr]]">
<span style="font-size: 13px">
[[item.title]]
</span>
<br>
<span style="font-size: 10px;">
[[item.description]]
</span>
<br>
</template>
</p>
</template>
</dom-module>
`
Insert cell
html `
<script>
HTMLImports.whenReady(function () {
Polymer({
is: 'my-life-cycle',
properties: {
arr: {
type: Array,
value() {
return [{
"title": this.localName + '#' + this.id + ' was created',
"description": "Called when the element has been created, but before property values are set and local DOM is initialized. Use for one-time set-up before property values are set."
}];
}
}
},
created() {
let obj = {
"title": this.localName + '#' + this.id + ' was created',
"description": "Called when the element has been created, but before property values are set and local DOM is initialized. Use for one-time set-up before property values are set."
};
},
ready() {
let obj = {
"title": this.localName + '#' + this.id + ' has local DOM initialized',
"description": "Called after property values are set and local DOM is initialized. Use for one-time configuration of your component after local DOM is initialized"
};
this.push('arr', obj);
},
attached() {
let obj = {
"title": this.localName + '#' + this.id + ' was attached',
"description": " Called after the element is attached to the document. Can be called multiple times during the lifetime of an element. The first 'attached' callback is guaranteed not to fire until after 'ready'."
};
this.push('arr', obj);
},
detached() {
let obj = {
"title": this.localName + '#' + this.id + ' was detached',
"description": "Called after the element is detached from the document. Can be called multiple times during the lifetime of an element."
};
this.push('arr', obj);
},
attributeChanged(name, type) {
let obj = {
"title": this.localName + '#' + this.id + ' attribute ' + name + ' was changed to ' + this.getAttribute(name),
"description": "Called when one of the element's attributes is changed."
};
this.push('arr', obj);
}
});
})
</script>
`
Insert cell
html`<my-life-cycle id="lcElt"></my-life-cycle>`
Insert cell
document.querySelector("#lcElt").id = "lcElt1"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html `
<script>
HighlightBehavior = {

properties: {
isHighlighted: {
type: Boolean,
value: false,
notify: true,
observer: '_highlightChanged'
}
},

listeners: {
click: '_toggleHighlight'
},

created: function() {
console.log('Highlighting for ', this, 'enabled!');
},

_toggleHighlight: function() {
this.isHighlighted = !this.isHighlighted;
},

_highlightChanged: function(value) {
this.toggleClass('highlighted', value);
}

};
</script>
`
Insert cell
Insert cell
html `
<script>
Polymer({
is: 'my-element',
behaviors: [HighlightBehavior]
});
</script>
`
Insert cell
html `
<dom-module id="my-element">
<template>
<p> I inherited highlight: <span style="color: green">[[isHighlighted]]</span><p>
</template>
</dom-module>
`
Insert cell
html`<my-element is-highlighted></my-element>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html `
<dom-module id="my-toolbar">

<template>

<style>
:host {
padding: 4px;
background-color: white;
}
.title {
color: var(--my-toolbar-title-color);
}
</style>

<span class="title">{{title}}</span>

</template>

<script>
Polymer({
is: 'my-toolbar',
properties: {
title: String
}
});
</script>

</dom-module>
`
Insert cell
Insert cell
html `
<dom-module id="my-elt-2">

<template>

<style>

/* Make all toolbar titles in this host green by default */
:host {
--my-toolbar-title-color: green;
}

/* Make only toolbars with the .warning class red */
.warning {
--my-toolbar-title-color: red;
}

</style>

<my-toolbar title="This one is green."></my-toolbar>
<my-toolbar title="This one is green too."></my-toolbar>

<my-toolbar class="warning" title="This one is red."></my-toolbar>

</template>

<script>
Polymer({ is: 'my-elt-2'});
</script>

</dom-module>
`
Insert cell
html `
<my-elt-2></my-elt-2>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`
<dom-module id="child-element">
<template>
<button on-click="onClickHandler">Change value</button>
</template>
<script>
Polymer({
is: "child-element",
properties: {
myProp: {
type: Object,
notify: true,
readOnly: false,
value: {'val': 'Initial value'}
}
},
onClickHandler: function(){
this.myProp.val = 'New value after you click the button.';
}
});
</script>
</dom-module>
<dom-module id="host-element">
<template>
<child-element my-prop="{{hostProp}}"></child-element>
<p>
Current value: <span>{{hostProp.val}}</span>
</p>
</template>
<script>
Polymer({
is: "host-element",
observers: ['_hostPropChanged(hostProp.val)'],
properties: {
hostProp: {
type: Object
}
},
_hostPropChanged() {
console.log(this.hostProp.val);
}
});
</script>
</dom-module>
`
Insert cell
Insert cell
Insert cell
html `
<dom-module id="array-1">
<template>
Arr 1<br>
<template is="dom-repeat" items="{{arr}}">
<div>Element: {{item}}</span></div>
</template>
Arr 2<br>
<template is="dom-repeat" items="{{arr2}}">
<div>Element: {{item.value}}</span></div>
</template>
</template>
</dom-module>`
Insert cell
html `
<script>
HTMLImports.whenReady(function () {
Polymer({
is: 'array-1',
properties: {
arr: {
type: Array,
value() {
return [1,2,3]
}
},
arr2: {
type: Array,
value() {
return [{'value': 1}, {'value': 2}, {'value': 3}]
}
}
},
observers: [
'_handleArr(arr.*)'
],
_handleArr() {
console.log("Got the array changes; Triggering the handler", arguments)
},
_push(elt) {
this.arr.push(elt)
},
_polymerPush(elt) {
this.push('arr', elt)
},
_replace(idx, elt) {
this.arr[idx] = elt
},
_replaceArr2(idx, elt) {
this.set('arr2.'+idx, elt)
}
});
})
</script>
`
Insert cell
html `<array-1 id="arr1"></array-1>`
Insert cell
html`
<script>
document.querySelector("#arr1")._push("Pushing using native array push")
</script>
`
Insert cell
html`
<script>
document.querySelector("#arr1")._polymerPush("Polymer push method")
</script>
`
Insert cell
html`
<script>
document.querySelector("#arr1")._replace(2, 4)
document.querySelector("#arr1")._replaceArr2(2, {'value': 5})
</script>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html `
<dom-module id="employee-list">
<template>
<div> Employee list: </div>
<template is="dom-repeat" id="employeeList" items="{{employees}}">
<div>First name: <span>{{item.first}}</span></div>
<div>Last name: <span>{{item.last}}</span></div>
<button on-click="toggleSelection">Select</button>
</template>

<array-selector id="selector" items="{{employees}}" selected="{{selected}}" multi toggle></array-selector>

<div> Selected employees: </div>
<template is="dom-repeat" items="{{selected}}">
<div>First name: <span>{{item.first}}</span></div>
<div>Last name: <span>{{item.last}}</span></div>
</template>

</template>

<script>
Polymer({
is: 'employee-list',
ready: function() {
this.employees = [
{first: 'Bob', last: 'Smith'},
{first: 'Sally', last: 'Johnson'}
];
},
toggleSelection: function(e) {
var item = this.$.employeeList.itemForElement(e.target);
this.$.selector.select(item);
}
});
</script>

</dom-module>
`
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more