Web components

Custom elements need no package: the renderer ships with the engine, and it is the one that proved the contract honest, because it assumes nothing — a tag name, an element, properties, remove().

import { registerRenderer, webComponentsRenderer } from "@kadal/deck/renderers";

registerRenderer(webComponentsRenderer);

<Island component="my-chart" props={{ data }} client="slide" />

component is either a tag name (anything with a hyphen) or a class. A class is defined under its own tagName if it declares one, under the tag it is already defined with, or under a fresh deck-island-N — and if someone else already owns its name, it gets a name of its own rather than fighting over it. Props are set as properties on the element.

On a surface that never hydrates (print, previews) an island renders as the inert tag with its attributes, which is exactly what a custom element looks like before it upgrades.