JSFiddle - React, Tailwind, and code Playground

by alfredopacino

HTML

<observer-test-main></observer-test-main>

JavaScript

import {LitElement, html} from "https://unpkg.com/[email protected]/lit-element.js";

class ObserverTestMain extends LitElement {

        constructor() {
            super();
            this.str = "Halo";
            this.obj = {key: "value"};
        }

        createRenderRoot() {
            return this;
        }

        change(e) {
            this.str = e.target.value;
            this.requestUpdate(); //this.str is not a prop
        }

        render() {
            return html`

                <p> Change "this.str" from the main component: <input type="text" value=${this.str} @input="${this.change}"></p>
                <hr>
                <observer-test-sub .str="${this.str}" .obj="${this.obj}">
                </observer-test-sub>
                    `;
        }
    }


    class ObserverTestSub extends LitElement {

        constructor() {
            super();
        }

        createRenderRoot() {
            return this;
        }

        static get properties() {
            return {
                str: {
                    type: String
                },
                obj: {
                    type: Object
                }
            };
        }

        change(e) {
            console.log(e.target.value)
            this.str = e.target.value
        }

        updated(changedProperties) {
            if (changedProperties.has("str")) {
                console.log("this is triggered in BOTH cases (changes from the main component and the sub component)")
                this._str = this.str + " copy";
                this.obj = {
                    key: this.str + " copy in object"
                }
            }
        }

        render() {
            return html`
                <p>Change "this.str" from the sub component:: <input type="text" value=${this.str} @input="${this.change}"></p>
                <p>this.str: ${this.str}</p>
                <p>this._str (Updated on this.str change): ${this._str} </p>
               ...