In this article iam gonna explain you how you can create custom web component in javascript i will demonstrate you popup modal example for this\nWeb component is html element which you can configure as you want behind the scene it uses native html element
\nWhy web component
\nEncapsulate Logic + UI
\nReusable across pages
\nTools for web component or custom html element
\nCustom HTML Element:\nRegister your own html tag
\nShadow Dom:\nManage a separate DOM node tree for your html element
\nTemplate and Slots:\nWrite Html templates that you can add to your html element
\n_ Ways for creating custom elements _
\nAutonomous Elements: These are the custom html element which doesn't depend upon anything means not on native html element
\nExtended Built-In elements: You can create custom element by extending built in html element
\nWeb component lifecycle
\nconstructor() -> Baic initializations, Element created
\nconnectedCallback() -> DOM Initializations, Element attached to dom
\ndisconnectedCallback() -> Cleanup work, Element detached from dom
\nattributeChangedCallback() -> Observed Attribute updated, Update Data + DOM
\nCreate a folder with the name it's depend upon you and create two file named modal.js and index.html again the name of javascript file depends upon you
\nclass Modal extends HTMLElement {}\n\n//registering custom element named as uc-modal\ncustomElement.define(\"uc-modal\", Modal);\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>Web Components</title>\n <style>\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 2rem;\n font-family: sans-serif;\n }\n </style>\n <script src=\"modal.js\"></script>\n </head>\n <body>\n <uc-modal></uc-modal>\n </body>\n</html>\nAs i have explained in the begining of this article that shadow dom manage dom tree for our html element so that it doesn't interfare with the dom tree outside our web component
\nAnd we need to update our web component code to the following
\nclass Modal extends HTMLElement {\n constructor() {\n super();\n //registering the shadow dom\n this.attachShadow({ mode: \"open\" });\n this.isOpen = false;\n\n //template for our modal with slot to take content from outside this web component\n this.shadowRoot.innerHTML = `\n <style>\n #backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background: rgba(0,0,0,0.75);\n z-index: 10;\n opacity: 0;\n pointer-events: none;\n }\n\n :host([opened]) #backdrop,\n :host([opened]) #modal {\n opacity: 1;\n pointer-events: all;\n }\n\n :host([opened]) #modal {\n top: 15vh;\n }\n\n #modal {\n position: fixed;\n top: 10vh;\n left: 25%;\n width: 50%;\n z-index: 100;\n background: white;\n border-radius: 3px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.26);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s ease-out;\n }\n\n header {\n padding: 1rem;\n border-bottom: 1px solid #ccc;\n }\n\n ::slotted(h1) {\n font-size: 1.25rem;\n margin: 0;\n }\n\n #main {\n padding: 1rem;\n }\n\n #actions {\n border-top: 1px solid #ccc;\n padding: 1rem;\n display: flex;\n justify-content: flex-end;\n }\n\n #actions button {\n margin: 0 0.25rem;\n }\n </style>\n <div id=\"backdrop\"></div>\n <div id=\"modal\">\n <header>\n <slot name=\"title\">Please Confirm Payment</slot>\n </header>\n <section id=\"main\">\n <slot></slot>\n </section>\n <section id=\"actions\">\n <button id=\"cancel-btn\">Cancel</button>\n <button id=\"confirm-btn\">Okay</button>\n </section>\n </div>\n `;\n }\n}\n\n//registering custom element named as uc-modal\ncustomElement.define(\"uc-modal\", Modal);\nWe need to open and close our modal which will be controlled by outside our web component by those who will be calling this\nweb component
\nWe need to update our modal.js and add code logic to open and close the modal for this we will be adding method attributeChangedCallback which is web component lifecycle which always run if there is anything changed on our shadow dom
\nWe will be adding method observedAttributes which is static method which returns what attribute has changed
\nWe will be adding open method which will change the web component attribute that is uc-model and add opened attribute and this method will be called from outside the web component
\nclass Modal extends HTMLElement {\n constructor() {\n super();\n //registering the shadow dom\n this.attachShadow({ mode: \"open\" });\n this.isOpen = false;\n\n //template for our modal with slot to take content from outside this web component\n this.shadowRoot.innerHTML = `\n <style>\n #backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background: rgba(0,0,0,0.75);\n z-index: 10;\n opacity: 0;\n pointer-events: none;\n }\n\n :host([opened]) #backdrop,\n :host([opened]) #modal {\n opacity: 1;\n pointer-events: all;\n }\n\n :host([opened]) #modal {\n top: 15vh;\n }\n\n #modal {\n position: fixed;\n top: 10vh;\n left: 25%;\n width: 50%;\n z-index: 100;\n background: white;\n border-radius: 3px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.26);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s ease-out;\n }\n\n header {\n padding: 1rem;\n border-bottom: 1px solid #ccc;\n }\n\n ::slotted(h1) {\n font-size: 1.25rem;\n margin: 0;\n }\n\n #main {\n padding: 1rem;\n }\n\n #actions {\n border-top: 1px solid #ccc;\n padding: 1rem;\n display: flex;\n justify-content: flex-end;\n }\n\n #actions button {\n margin: 0 0.25rem;\n }\n </style>\n <div id=\"backdrop\"></div>\n <div id=\"modal\">\n <header>\n <slot name=\"title\">Please Confirm Payment</slot>\n </header>\n <section id=\"main\">\n <slot></slot>\n </section>\n <section id=\"actions\">\n <button id=\"cancel-btn\">Cancel</button>\n <button id=\"confirm-btn\">Okay</button>\n </section>\n </div>\n `;\n }\n\n //this function will run if there is anything that is changed in the shadow DOM\n attributeChangedCallback(name, oldValue, newValue) {\n if (this.hasAttribute(\"opened\")) {\n this.isOpen = true;\n } else {\n this.isOpen = false;\n }\n }\n\n static get observedAttributes() {\n return [\"opened\"];\n }\n\n open() {\n this.setAttribute(\"opened\", \"\");\n this.isOpen = true;\n }\n}\n\n//registering custom element named as uc-modal\ncustomElement.define(\"uc-modal\", Modal);\nUpdate index.html with the following code
\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>Web Components</title>\n <style>\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 2rem;\n font-family: sans-serif;\n }\n </style>\n <script src=\"modal.js\"></script>\n </head>\n <body>\n <uc-modal>\n <h1 slot=\"title\">Please Confirm</h1>\n <p>With your confirmation you agree to pay the full amount!</p>\n </uc-modal>\n <p>Please confirm your choice.</p>\n <button>Show Details & Confirm</button>\n <script>\n const confirmButton = document.querySelector(\"button\");\n const modal = document.querySelector(\"uc-modal\");\n\n confirmButton.addEventListener(\"click\", () => {\n // modal.setAttribute('opened', '');\n if (!modal.isOpen) {\n modal.open();\n console.log(\"Opening...\");\n }\n });\n </script>\n </body>\n</html>\nWe will be adding code to listen to slot changes as explained earlier slot is the way to get the content from outside the web component
\nWe will be adding hide method to hode the modal
\nWe will be adding _cancel method and _confirm method to close the modal on Cancel and Confirm click
\nUpdate the modal.js file with the following code
\nclass Modal extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: \"open\" });\n this.isOpen = false;\n this.shadowRoot.innerHTML = `\n <style>\n #backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background: rgba(0,0,0,0.75);\n z-index: 10;\n opacity: 0;\n pointer-events: none;\n }\n\n :host([opened]) #backdrop,\n :host([opened]) #modal {\n opacity: 1;\n pointer-events: all;\n }\n\n :host([opened]) #modal {\n top: 15vh;\n }\n\n #modal {\n position: fixed;\n top: 10vh;\n left: 25%;\n width: 50%;\n z-index: 100;\n background: white;\n border-radius: 3px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.26);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s ease-out;\n }\n\n header {\n padding: 1rem;\n border-bottom: 1px solid #ccc;\n }\n\n ::slotted(h1) {\n font-size: 1.25rem;\n margin: 0;\n }\n\n #main {\n padding: 1rem;\n }\n\n #actions {\n border-top: 1px solid #ccc;\n padding: 1rem;\n display: flex;\n justify-content: flex-end;\n }\n\n #actions button {\n margin: 0 0.25rem;\n }\n </style>\n <div id=\"backdrop\"></div>\n <div id=\"modal\">\n <header>\n <slot name=\"title\">Please Confirm Payment</slot>\n </header>\n <section id=\"main\">\n <slot></slot>\n </section>\n <section id=\"actions\">\n <button id=\"cancel-btn\">Cancel</button>\n <button id=\"confirm-btn\">Okay</button>\n </section>\n </div>\n `;\n const slots = this.shadowRoot.querySelectorAll(\"slot\");\n slots[1].addEventListener(\"slotchange\", (event) => {\n console.dir(slots[1].assignedNodes());\n });\n const backdrop = this.shadowRoot.querySelector(\"#backdrop\");\n const cancelButton = this.shadowRoot.querySelector(\"#cancel-btn\");\n const confirmButton = this.shadowRoot.querySelector(\"#confirm-btn\");\n backdrop.addEventListener(\"click\", this._cancel.bind(this));\n cancelButton.addEventListener(\"click\", this._cancel.bind(this));\n confirmButton.addEventListener(\"click\", this._confirm.bind(this));\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (this.hasAttribute(\"opened\")) {\n this.isOpen = true;\n } else {\n this.isOpen = false;\n }\n }\n\n static get observedAttributes() {\n return [\"opened\"];\n }\n\n open() {\n this.setAttribute(\"opened\", \"\");\n this.isOpen = true;\n }\n\n hide() {\n if (this.hasAttribute(\"opened\")) {\n this.removeAttribute(\"opened\");\n }\n this.isOpen = false;\n }\n\n _cancel(event) {\n this.hide();\n }\n\n _confirm() {\n this.hide();\n }\n}\n\ncustomElements.define(\"uc-modal\", Modal);\nUpdate the index.html file with the following code
\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>Web Components</title>\n <style>\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 2rem;\n font-family: sans-serif;\n }\n </style>\n <script src=\"modal.js\"></script>\n </head>\n <body>\n <uc-modal>\n <h1 slot=\"title\">Please Confirm</h1>\n <p>With your confirmation you agree to pay the full amount!</p>\n </uc-modal>\n <p>Please confirm your choice.</p>\n <button>Show Details & Confirm</button>\n <script>\n const confirmButton = document.querySelector(\"button\");\n const modal = document.querySelector(\"uc-modal\");\n\n modal.addEventListener(\"confirm\", () => {\n console.log(\"Confirmed...\");\n });\n\n modal.addEventListener(\"cancel\", () => {\n console.log(\"Cancelled...\");\n });\n\n confirmButton.addEventListener(\"click\", () => {\n // modal.setAttribute('opened', '');\n if (!modal.isOpen) {\n modal.open();\n console.log(\"Opening...\");\n }\n });\n </script>\n </body>\n</html>\n