Runtime Mode
No component definitions are baked into the WASM module. Write a
LitElement class below, provide HTML that uses it, and the WASM
module will evaluate your JavaScript in its internal QuickJS engine,
register the custom element, and render it with Declarative Shadow
DOM.
Try changing the colour of an alert state in the element definition's CSS and rerendering
Component Definition (JavaScript)
class MyAlert extends LitElement {
static properties = {
type: { type: String, reflect: true }
};
constructor() {
super(...arguments);
this.type = 'info';
}
static styles = css `
#container {
display: block;
padding: 1rem;
border-radius: 8px;
margin: 0.5rem;
&.success {
background: light-dark(#d4edda, #1a3a2a);
color: light-dark(#155724, #a3d9a5);
border: 1px solid light-dark(#c3e6cb, #2d5a3d);
}
&.error {
background: light-dark(#f8d7da, #3a1a1a);
color: light-dark(#721c24, #e5a3a3);
border: 1px solid light-dark(#f5c6cb, #5a2d2d);
}
&.info {
background: light-dark(#cce5ff, #1a2a3a);
color: light-dark(#004085, #a3c4e5);
border: 1px solid light-dark(#b8daff, #2d3d5a);
}
}
#icon { margin-inline-end: 0.5rem; }
`;
get #icon() {
switch (this.type) {
case 'success': return '\u2705';
case 'error': return '\u274c';
case 'info': return '\u2139\ufe0f';
default: return '\u2139\ufe0f';
}
}
render() {
const { type } = this;
return html `
<div id="container" class="${classMap({ [type]: !!type })}">
<span id="icon">${this.#icon}</span>
<slot></slot>
</div>
`;
}
}
customElements.define("my-alert", MyAlert);
HTML to Render
<my-alert type="success">Deployment complete</my-alert>
<my-alert type="error">Build failed: exit code 1</my-alert>
<my-alert type="info">Next deploy scheduled for 3:00 PM</my-alert>
Render
Live Preview
SSR Output
Click "Render" to see the output
lit-ssr-wasm