Introduction
And here is how all begins.
export default class extends HTMLElement {
static get observedAttributes() {
return ['record', 'context-data'];
}
constructor() {
super();
}
connectedCallback() {
this.update();
}
disconnectedCallback() {
}
attributeChangedCallback(attrName, oldVal, newVal) {
this.update();
}
get record() {
return JSON.parse(this.getAttribute('record'));
}
set record(value) {
this.setAttribute('record', JSON.stringify(value));
}
get contextData() {
return JSON.parse(this.getAttribute('context-data'));
}
update() {
let template = '';
if (this.record) {
template = `
<h3>Record Values</h3>
<pre>${JSON.stringify(this.record, undefined, 2)}</pre>
`;
}
this.innerHTML = template;
}
}
export default class extends HTMLElement {
static get observedAttributes() {
return ['record', 'context-data'];
}
constructor() {
super();
}
connectedCallback() {
this.update();
}
disconnectedCallback() {
}
attributeChangedCallback(attrName, oldVal, newVal) {
this.update();
}
get record() {
return JSON.parse(this.getAttribute('record'));
}
set record(value) {
this.setAttribute('record', JSON.stringify(value));
}
get contextData() {
return JSON.parse(this.getAttribute('context-data'));
}
update() {
let template = '';
if (this.record) {
template = `
<h3>Record Values</h3>
<pre>${JSON.stringify(this.record, undefined, 2)}</pre>
`;
}
this.innerHTML = template;
}
}
Copy