class FeedItem extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); } connectedCallback() { const template = document.createElement('template'); template.innerHTML = ` `; fetch(`/api/item/${this.getAttribute('item-id')}`) .then(res => res.json()) .then(item => { template.innerHTML += `

${item.Title}

`; template.innerHTML += `
${item.Content || item.Description}
`; template.innerHTML += `` this.shadowRoot.appendChild(template.content.cloneNode(true)); [...this.shadowRoot.querySelectorAll('a[href^=http]')].forEach(a => { a.setAttribute("target", "_blank"); a.setAttribute("rel", "noopener"); }); [...this.shadowRoot.querySelectorAll('p')].forEach(p => { if (p.innerText.trim() == "") { p.remove(); } }); let url = new URL(item.URL); [...this.shadowRoot.querySelectorAll('img[src^="/"]')].forEach(i => { i.src = url.origin + i.getAttribute('src'); }); [...this.shadowRoot.querySelectorAll('a[href^="/"]')].forEach(a => { a.href = url.origin + a.getAttribute('src'); }); [...this.shadowRoot.querySelectorAll('img:not([src^=http])')].forEach(i => { i.src = url.origin +'/'+ i.getAttribute('src'); }); [...this.shadowRoot.querySelectorAll('a:not([href^=http])')].forEach(a => { a.href = url.origin +'/'+ a.getAttribute('src'); }); }) } showIframe() { this.shadowRoot.querySelector(".feedContent").style.display = "none"; this.shadowRoot.querySelector("iframe").src = this.shadowRoot.querySelector("iframe").dataset.src; this.shadowRoot.querySelector("iframe").style.display = "block"; } } customElements.define('feed-item', FeedItem);