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> :host([center]) { position: fixed; transform: translate(-50%, -50%); left: 50%; top: 50%; border-color: blue; } :host { display: inline-block; border: 2px solid red; padding: 15px; } </style> <slot></slot> </template> <custom-dialog center> Centre! Welcome to W3Docs. </custom-dialog> <custom-dialog> Not centre. Welcome site. </custom-dialog> <script> customElements.define('custom-dialog', class extends HTMLElement { connectedCallback() { this.attachShadow({mode: 'open'}).append(tmpId.content.cloneNode(true)); } }); </script> </body> </html>