table-footer-group-tag.js

const template = document.createElement('template');
template.innerHTML = `
    <style>
        /* Uncomment and provide a URL if you want to import an external stylesheet */
        /* @import url(); */

        :host {
            /* for the shadow root */
            display: block;
        }

        :host(table-footer-group-tag) {
            /* if my shadow root is table-footer-group-tag */
        }

        :host-context(main) {
            /* if one of my ancestors is main */
        }

        ::slotted(*) {
            /* anything that is slotted */
        }

        .table-footer-group-tag {}
    </style>

    <tfoot class="table-footer-group-tag" part="table-footer-group-tag"></tfoot>
`;

class TableFooterGroupTag extends HTMLElement {
    constructor() {
        super();

        this.root = this.attachShadow({ mode: 'closed' });
        this.root.innerHTML = template.innerHTML;
    }

    // Define allowed attributes
    static get observedAttributes() {
        return [];
    }

    // Handle values and changes to the attributes
    attributeChangedCallback(_attrName, _oldVal, _newVal) {
        // Handle attribute changes here if needed
    }
}

customElements.define('table-footer-group-tag', TableFooterGroupTag);

// <table-footer-group-tag id='some id'>
// </table-footer-group-tag>