61 lines
No EOL
1.6 KiB
HTML
61 lines
No EOL
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!--
|
|
Hello! This page is an example McFly page.
|
|
See more on https://ayco.io/gh/McFly
|
|
-->
|
|
<my-head>
|
|
<title>McFly: Back to the Basics. Into the Future.</title>
|
|
<script server:setup>
|
|
const project = {
|
|
name: "McFly",
|
|
description: "Back to the Basics. Into the Future."
|
|
};
|
|
const author = {
|
|
name: "Ayo Ayco",
|
|
url: "https://ayco.io"
|
|
}
|
|
</script>
|
|
</my-head>
|
|
<body>
|
|
<awesome-header>
|
|
<span>{{ project.name }}</span>
|
|
<span slot="description">{{ project.description }}</span>
|
|
</awesome-header>
|
|
<main>
|
|
<h2>Welcome to {{ project.name }}</h2>
|
|
<p>
|
|
Here's a vanilla custom element: <vanilla-hello-world />
|
|
</p>
|
|
<code-block language="js">
|
|
class HelloWorld extends HTMLElement {
|
|
static get observedAttributes() {
|
|
return ["my-name"];
|
|
}
|
|
|
|
connectedCallback() {
|
|
let count = 0;
|
|
const currentName = this.getAttribute("my-name");
|
|
|
|
if (!currentName) {
|
|
this.setAttribute("my-name", "World")
|
|
}
|
|
|
|
this.onclick = () => {
|
|
this.setAttribute("my-name", `Clicked ${++count}x`);
|
|
};
|
|
}
|
|
|
|
attributeChangedCallback(property, previousValue, currentValue) {
|
|
if (property === "my-name" && previousValue !== currentValue) {
|
|
this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
|
|
}
|
|
}
|
|
}
|
|
</code-block>
|
|
</main>
|
|
<my-footer>
|
|
<small>A project by <a href="{{ author.url }}">{{ author.name }}</a></small>
|
|
</my-footer>
|
|
</body>
|
|
</html> |