Skip to main content

Lit

import { html, css, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
static styles = css`
p {
color: blue;
}
`;

@property()
name = 'Somebody';

render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}
<body>
<simple-greeting name="World"></simple-greeting>
</body>

react

import * as React from 'react';
import { createComponent } from '@lit-labs/react';
import { MyElement } from './my-element.js';

export const MyElementComponent = createComponent(React, 'my-element', MyElement, {
onactivate: 'activate',
onchange: 'change',
});
<MyElementComponent active={isActive} onactivate={(e) => (isActive = e.active)} />