Skip to content

Instantly share code, notes, and snippets.

@voltagex

voltagex/index.html

Last active Dec 21, 2020
Embed
What would you like to do?
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