Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE HTML> <html> <head> <title>Title of the Document</title> <head> <body> <template id="tmpId"> <style> /* the style will be applied internally to the custom-dialog element */ :host { position: fixed; transform: translate(-50%, -50%); left: 50%; top: 50%; display: inline-block; border: 2px solid blue; padding: 15px; } </style> <slot></slot> </template> <custom-dialog> Welcome to W3Docs </custom-dialog> <script> customElements.define('custom-dialog', class extends HTMLElement { connectedCallback() { this.attachShadow({mode: 'open'}).append(tmpId.content.cloneNode(true)); } }); </script> </body> </html>