| import { riff, route, html, indexRoute } from "../riff/riff.mjs"; | |
| import { serve } from "../riff/riff-express.mjs"; | |
| import { | |
| deleteTask, | |
| getProjects, | |
| getTasks, | |
| getUser, | |
| sendEmail, | |
| updateTask, | |
| createTask, |
This gist is a simple no-brainer description of the 3 ways (actually 2.5) the Web handle events.
The declarative inline HTML event listener is mostly an indirection of DOM Level 0 events, meaning this simply uses the equivalent of tag.onclick = listener behind the scene.
click me
| customElements.define( | |
| "i-frame", | |
| class extends HTMLElement { | |
| #shadow = this.attachShadow({ mode: "closed" }); | |
| constructor() { | |
| super(); | |
| this.#shadow.innerHTML = ` | |
| <slot></slot> | |
| <iframe part="frame" srcdoc=""></iframe> |
| import { LitElement, html } from 'lit'; | |
| /* | |
| This mimics the behavior of <slot>s in a light DOM LitElement. It supports both | |
| named slots (`<slot name="foo">`) and anonymous slots (`<slot>`). This has not | |
| been heavily tested yet, but seems to work for most simple use cases using | |
| Lit 3.1.4. | |
| There are a few minor differences between Shadow DOM and this, particularly if: | |
| - you attempt to add content to a named slot but that slot isn't defined in the |