const template = document.createElement('template');
template.innerHTML = `
`
class toot extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({ 'mode': 'open' });
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$toot = this._shadowRoot.querySelector('#tootContainer');
}
static get observedAttributes() {
return ['author_name', 'author_username', 'author_url', 'avatar_url', 'toot_content', 'toot_url', 'publish_date'];
}
attributeChangedCallback(name, oldVal, newVal) {
if (oldVal != newVal) {
this[name] = newVal;
this.render();
}
}
render() {
this.$toot.querySelector('#author-link').innerHTML = `${this.author_name} (@${this.author_username})`;
this.$toot.querySelector('#author-link').href = this.author_url;
this.$toot.querySelector('wc-profile-pic').setAttribute('url', this.avatar_url)
this.$toot.querySelector('#toot').innerHTML = this.toot_content;
this.$toot.querySelector('#publish-date').innerHTML = this.publish_date;
this.$toot.querySelector('#toot-link').setAttribute('href', this.toot_url)
}
}
window.customElements.define('wc-toot', toot);