# All about  (CUSTOM ELEMENT)

References:-

[https://web.dev/custom-elements-v1/](https://web.dev/custom-elements-v1/)

```xml
<my-element>
  <div class="my_class">hello1</div>
  <div class="my_class">hello 2</div>
</my-element>

<my-element>
  <div class="my_class">hello1</div>
  <div class="my_class">hello 2</div>
</my-element>

<my-element>
  <div class="my_class">hello1</div>
  <div class="my_class">hello 2</div>
</my-element>
<script>
  class MyElement extends HTMLElement {
    constructor() {
      // Always call super first in constructor
      super();
      // write element functionality in here
      let col = ["green","red","blue","pink","yellow","black","yellow","red","black"]
      let randomNum = Math.floor(Math.random() * 4) + 1;
      this.querySelectorAll('.my_class').forEach((el)=> el.style.color = col[randomNum])
    }
  }
  customElements.define("my-element", MyElement);
</script>
```