Web component creation without any framework.

WebComponent.js

class PopUpInfo extends HTMLElement{
    constructor(){
        super();
        this.attachFunctionality();
    }
    attachFunctionality(){
       var shadow = this.attachShadow({mode:'open'});
       var span = document.createElement("span");
       span.innerHTML = "Hi Rakesh! your first html Element... Congratulations ...";
       shadow.appendChild(span);
    }
}

(function(){
    alert("hello");
    customElements.define("pop-up-info", PopUpInfo);
}())

// In Html add element <pop-up-info></pop-up-info>