Hiding Web Custom component's Attribute value

Question

I'm new to Native Javascript Web Component. I've created a Web Component

class Table extends HTMLElement {
  constructor() {
    super();
    this.root = this.attachShadow({ mode: "closed" });
    const clone = tableTamplate.content.cloneNode(true);
    this.root.append(clone);
  }

  static get observedAttribute() {
    return ["table-data"];
  }

  connectedCallback() {
    console.log("Table Component Attached");
    const table_data = this.getAttribute("table-data");
    console.log(JSON.parse(table_data));
  }

  attributeChangedCallback(name, oldVal, newVal) {
    if (oldVal != newVal) {
      switch (name) {
        case "table-data":
          break;
      }
    }
  }
}

Is there a way to hide the value of the attribute from Development Tools > Element. The reason for asking is that, I don't want users to see the data I'm passing specially when there's sensitive information on it.

[show data in attribute](https://i.stack.imgur.com/SkdB0.png)

I tried setting enumerable field from Object.defineProperty

[setting enumerable](https://i.stack.imgur.com/eBOuS.png)

but it I got an error.

[error on setting enumerable](https://i.stack.imgur.com/TQC5X.png)