Pug WebComponent
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Page Title</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script type="text/javascript"> | |
| class PugPhoto extends HTMLElement { | |
| constructor() { | |
| super(); | |
| console.log("Constructed a Pug"); | |
| var shadow = this.attachShadow({mode: 'open'}); | |
| fetch("https://dog.ceo/api/breed/pug/images/random").then(function (response) { | |
| response.json().then(function(pugObject) { | |
| var img = document.createElement("img"); | |
| img.src = pugObject.message; | |
| shadow.appendChild(img); | |
| }) | |
| }) | |
| } | |
| connectedCallback() { | |
| console.log('Yes, this is Pug'); | |
| } | |
| } | |
| customElements.define("pug-photo",PugPhoto); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Yes, I did write a WebComponent just for this</h1> | |
| <br/> | |
| <pug-photo /> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment