Components¶

Every <nessie-…> tag is a Web Component built on NessieElement in components/base.js. They render into the light DOM (no shadow DOM), so Bootstrap classes and the theme CSS reach inside them like anywhere else.

class NessieThing extends NessieElement {
    setup()       { /* once, on connect: add listeners. this.listen(target, type, fn) cleans up on disconnect */ }
    render()      { return html`…`; }   // called by update(); its result replaces innerHTML
    afterRender() { /* touch the DOM render() just drew */ }
}
reactive(NessieThing, 'items');   // setting el.items calls update()
define('nessie-thing', NessieThing);

The rules every component follows (the comment at the top of base.js):

• Data in through properties (el.tracks = […]). Attributes are only for plain settings (numbering="track").
• Requests out through bubbling events (emit(this, PLAY, {…})). A component never calls the player or another component directly.
• Listeners on anything outside itself go through this.listen(), so they're removed when the element leaves the page.