table-header-cell-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-header-cell-tag) {
            /* if my shadow root is table-header-cell-tag */
        }

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

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

        .table-header-cell-tag {}
    </style>

    <th class="table-header-cell-tag" part="table-header-cell-tag"></th>
`;

class TableHeaderCellTag 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-header-cell-tag', TableHeaderCellTag);

// <table-header-cell-tag id='some id'>
// </table-header-cell-tag>