javascript 个自定义元素构造函数是否共享相同的内存？

Question

当我这样定义自定义元素时：

customElements.define(
   "my-tag",
   class extends HTMLElement {
      constructor() {
         var data = {};
         ...

当我多次使用该元素时，例如：

<div>
   <my-tag yadda="yadda"></my-tag>
   <my-tag yadda="yadda2"></my-tag>
</div>

我注意到 'data' 在 'my-tag' 的所有实例之间共享。

我也尝试创建属性，例如：

customElements.define(
   "my-tag",
   class extends HTMLElement {
      constructor() {
         this.data = {};
         ...

但在各个实例之间仍然获得相同的共享内存。

我错过了什么？

Answer 1

每个自定义元素都有自己的范围：

<my-tag id="ONE"></my-tag>
<my-tag id="TWO"></my-tag>

<script>
  customElements.define(
    "my-tag",
    class extends HTMLElement {
      constructor() {
        super() // sets AND returns this scope
              .data = Math.random(); // chain on super, just because we can
        console.log("constructor", this);
      }
      connectedCallback() {
        console.log("connected" , this.id, this.data, this);
      }
      
    })
</script>

javascript 个自定义元素构造函数是否共享相同的内存？

Do the javascript custom elements constructors share the same memory?

javascript

class

memory-management

custom-element