function defineTemplate() {
    const template = document.createElement('template');
    template.innerHTML = `
<style>
    a {
        text-decoration: none;
    }
</style>

<a target="_blank">
    <img/>
</a>
`;

    return template;
}

class Button8831 extends HTMLElement {
    static observedAttributes = ['href', 'src', 'hint'];

    constructor() {
        super();

        const templateContent = defineTemplate().content;

        const shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.appendChild(templateContent.cloneNode(true));

        this.anchor = shadowRoot.querySelector('a');
        this.img = shadowRoot.querySelector('img');

        this.updateAttributes();
    }

    attributeChangedCallback() {
        this.updateAttributes();
    }

    updateAttributes() {
        this.img.setAttribute('src', this.getAttribute('src') || 'https://www.88x31.nl/gifs/thedigitalme.gif');
        this.img.setAttribute('alt', this.getAttribute('hint') || 'Click here');

        this.anchor.setAttribute('href', this.getAttribute('href') || '#');
        this.anchor.setAttribute('about', this.getAttribute('hint') || '');
    }
}

customElements.define('button-8831', Button8831);