inserted-text-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(inserted-text-tag) {
            /* if my shadow root is inserted-text-tag */
        }

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

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

        .inserted-text-tag {}
    </style>

    <ins class="inserted-text-tag" part="inserted-text-tag"></ins>
`;

class InsertedTextTag 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('inserted-text-tag', InsertedTextTag);

// <inserted-text-tag id='some id'>
// </inserted-text-tag>