创建一个新的 属性 并获取元素 ID？

Question

我想创建一个新的 属性 并获取元素（demo1、demo2、demo3）的 id。

id: this.id = 如何从这里的元素中获取id？

Element.prototype.myData = {
  id: '1', 
  name: 'Caesar',
  title: 'Imperator'
  var att = "{id:"+id+";name:"+name+";title:"+title+"}";
  document.getElementById(this.id).setAttribute("myAtt", att); // get id of element
  
};

alert(document.getElementById("demo1").myData.id = "129"); // alert 129

alert(document.getElementById("demo2").myData.id = "65"); // alert 65
alert(document.getElementById("demo2").myData.name = "Aleksandar"); // alert Aleksandar

alert(document.getElementById("demo3").myData.title); // alert Imperator

<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>

Answer 1

class CustomDiv extends HTMLDivElement {
    myData = {
       id: '',
       name: 'Caesar',
       title: 'Imperator'
    };
    constructor() {
        super();
    }

    connectedCallback() {
        this.myData.id = this.getAttribute('id');
    }
}

customElements.define('custom-div',CustomDiv , {extends: 'div'});


alert(document.getElementById("demo1").myData.id); // alert demo1

alert(document.getElementById("demo2").myData.name); // alert Cesar

alert(document.getElementById("demo3").myData.title); // alert Imperator

<div is="custom-div" id="demo1"></div>
<div is="custom-div" id="demo2"></div>
<div is="custom-div" id="demo3"></div>