BaseElement.js

export default class BaseElement extends HTMLElement {

    constructor() {
        super();
        this.root = this.attachShadow({mode: 'open'});
    }

    getStyle() {
        const relativePath = import.meta.url.substring(window.location.origin.length);
        const end = relativePath.lastIndexOf('/');
        const path = relativePath.substring(0, end);
        return `./${path}/style.css`;
    }

    render() {
        fetch(this.getStyle())
            .then(css => {
                render(html`
                <style>
                ${css.text()}
                </style>
                ${this.getTemplate()}
                `, this.root);
            })
    }

}

GiftTable.js

export default class GiftTable extends BaseElement {

    connectedCallback() {
        this.recalculateSite();
    }

    // should be moved to BaseElement.js but import.meta returns the wrong value
    getStyle() {
        const relativePath = import.meta.url.substring(window.location.origin.length);
        const end = relativePath.lastIndexOf('/');
        const path = relativePath.substring(0, end);
        return `./${path}/style.css`;
    }

    recalculateSite() {
        new GiftClient().retriveGifts()
            .then(gifts => {
                this.gifts = gifts;
                this.render();
            })
    }

    getTemplate() {
        return html`
        <style>
        </style>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>URL</th>
                    <th>Delete</th>
                </tr> 
            </thead>
            <tbody>
                ${this.gifts
            .map(gift => this.toEntry(gift))
            }
            </tbody>
        </table>
        `;
    }

    deleteGift(id) {
        new GiftClient().deleteGift(id)
            .then(_ => this.recalculateSite());
    }

    toEntry(gift) {
        return html`
       <tr>
            <td>${gift.name}</td>  
            <td>${gift.link}</td>
            <td><button @click=${_ => this.deleteGift(gift.id)}>delete</button></td>
       </tr> 
        `;
    }
}

customElements.define('gift-table', GiftTable);