json-data

<t-button></t-button>

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

    const set = this.setAttribute.bind(this);
    this.customProps = [];
    this.setAttribute = function (name, value) {
      const type = typeof value;
      if (type === "null" || (type !== "null" && type !== "object")) {
        set(name, value);
        return;
      }

      if (type !== null && type === "object") {
        this.customProps.push(name);
        console.log("you set a json value . its ==> ", {
          name: value,
        });
        Object.defineProperty(this, name, {
          get() {
            return value;
          },
          set(newValue) {
            value = newValue;
            console.log("you set a json value . its ==> ", {
              name: value,
            });
          },
          enumerable: false,
          configurable: true,
        });
      }
    };
  }

  static observedAttributes = ["b"];
  attributeChangedCallback(name, oldValue, newValue) {
    console.log("you set a static value , its ==>", { name: newValue });
  }
}

customElements.define("t-button", TButton);

const button = document.querySelector("t-button");
button.setAttribute("a", 1);
button.setAttribute("b", 2);
button.setAttribute("c", { num: 10 });

setTimeout(() => {
  console.log("————————————");
  button.setAttribute("a", 2);
  button.setAttribute("b", 3);
  button.setAttribute("c", { num: 20 });
}, 1000);