controller-registry/example.html

25 lines
787 B
HTML

<script type="module">
import controllers from "./src/controller-registry.js"
import {html} from "https://cdn.jsdelivr.net/npm/nyooom/render.js"
Object.defineProperty(HTMLElement.prototype, "controllers", {
get() { return controllers.list(this) }
})
controllers.define("red", async (element, disconnected) => {
const before = element.style.color
element.style.color = "red"
element.addEventListener("click", () => element.controllers.remove("red"), disconnected)
await disconnected
element.style.color = before
})
controllers.define("asterisk", async (element, disconnected) => {
const asterisk = html.span("*", {controller: ["red"]})
element.append(asterisk)
await disconnected
asterisk.remove()
})
</script>
<h1 controller="asterisk">Hello, World!</h1>