64 lines
1.8 KiB
HTML
64 lines
1.8 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>WebComponent.io: Write web components in Easy Mode.</title>
|
|
<link rel="stylesheet" href="prism.css" />
|
|
<script src="prism.js" defer></script>
|
|
<script server:setup>
|
|
const project = {
|
|
name: "WebComponent.io",
|
|
description: "Write web components in <em>Easy Mode</em>.",
|
|
};
|
|
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>
|
|
<p>
|
|
Our
|
|
<a href="https://www.npmjs.com/package/web-component-base">
|
|
tiny package
|
|
</a>
|
|
provides zero-dependency, ~600 Bytes (minified & gzipped), JS base class
|
|
for creating reactive custom elements easily
|
|
</p>
|
|
|
|
<p>
|
|
When you extend the WebComponent class for your component, you only have
|
|
to define the template and properties. Any change in any property value
|
|
will automatically cause just the component UI to render.
|
|
</p>
|
|
|
|
<p>The result is a reactive UI on property changes.</p>
|
|
<code-block language="js">
|
|
<pre>
|
|
export class Counter extends WebComponent {
|
|
static properties = ["count"];
|
|
onInit() {
|
|
this.props.count = 0;
|
|
this.onclick = () => ++this.props.count;
|
|
}
|
|
get template() {
|
|
return `<button>${this.props.count}</button>`;
|
|
}
|
|
}</pre>
|
|
</code-block>
|
|
</main>
|
|
<my-footer>
|
|
<small>
|
|
A project by <a href="{{ author.url }}">{{ author.name }}</a>
|
|
</small>
|
|
</my-footer>
|
|
</body>
|
|
</html>
|