enlighted-link.html

<!-- enlighted-link @version: 0.1.0 @license: MIT -->
<script>
customElements.define('enlighted-link', class extends HTMLElement{
    static get observedAttributes(){
        return [
            // content attrs
            'href',
            'rel',
            'media',
            'hreflang',
            'type',
            'sizes',
            'title'
        ]
    }
    connectedCallback(){
        const forwardEvent = (oldEvent)=>{
            this.dispatchEvent(new oldEvent.constructor(oldEvent.type, oldEvent));
        }
        let link;
        if(this.link){
            link = this.link;
        } else {
            link = this.link = document.createElement('link');
            link.addEventListener('load', forwardEvent);
            link.addEventListener('error', forwardEvent);
        }

        for(let attrNo = 0, len = this.attributes.length; attrNo < len; attrNo++){
            link.setAttribute(this.attributes[attrNo].name, this.attributes[attrNo].value);
        }
        document.head.appendChild(link);
        // IDEA(tomalec): attach mutation observer on links parent, to detach this in case link is detached.
    }
    disconnectedCallback(){
        this.link.remove();
    }
    attributeChangedCallback(name, oldVal, newVal){
        if(this.link){
            if(newVal !== null){
                this.link.setAttribute(name, newVal);
            } else {
                this.link.removeAttribute(name);
            }
        }
    }
});
</script>