Skip to main content

Lit

lit/lit
- Web Components
https://lit.dev/playground
rollup.config.js
@web/dev-server
- 开发环境
- esbuild + rollup

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

@lit-labs/react
- createComponent - WebComponent -> React
- useController

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)} />

react