JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<my-element text="Lorem ipsum dolor sit amet."></my-element>

JavaScript

// let the browser know that <my-element> is served by our new class
customElements.define("my-element", class extends HTMLElement {

    static get observedAttributes() {
        return [
            'text'
        ];
    }

    constructor() {
        super();

        const shadow = this.attachShadow({
            mode: 'closed'
        });
        
        const app = document.createElement('div');
        app.textContent = this.getAttribute('text');
		shadow.appendChild(app);
        
        const style = document.createElement('style');
		style.textContent = `:host {display:block;}`;
        shadow.appendChild(style);
        
        const script = document.createElement('script');
		script.textContent = `console.log('` + this.getAttribute('text') +  `')`;
        shadow.appendChild(script);
    }

    connectedCallback() {
        // browser calls this method when the element is added to the document
        // (can be called many times if an element is repeatedly added/removed)
        // console.log('connectedCallback');
    }

    disconnectedCallback() {
        // browser calls this method when the element is removed from the document
        // (can be called many times if an element is repeatedly added/removed)
        // console.log('disconnectedCallback');
    }

    attributeChangedCallback(name, oldValue, newValue) {
        // called when one of attributes listed above is modified
        // console.log('attributeChangedCallback', name, oldValue, newValue);
    }

    adoptedCallback() {
        // called when the element is moved to a new document
        // (happens in document.adoptNode, very rarely used)
        // console.log('adoptedCallback', this.getAttribute('foo'));
    }

    // there can be other element methods and properties
});