https://lit.dev

LitSimple. Fast. Web Components.LitDocumentationv3v2v1LearnPlaygroundBlogSearchCancel Light mode Dark mode System Documentationv3v2v1LearnPlaygroundBlogSearchCancel Light mode Dark mode System 💡 Lit.dev now supports dark mode. Try it out by toggling it in the top menu. Feedback welcome!Simple. Fast. Web Components.> npm i lit Get StartedSimpleSkip the boilerplateBuilding on top of the Web Components standards, Lit adds just what you need to be happy and productive: reactivity, declarative templates and a handful of thoughtful features to reduce boilerplate and make your job easier. Every Lit feature is carefully designed with web platform evolution in mind.FastTiny footprint, instant updatesWeighing in at around 5 KB (minified and compressed), Lit helps keep your bundle size small and your loading time short. And rendering is blazing fast, because Lit touches only the dynamic parts of your UI when updating — no need to rebuild a virtual tree and diff it with the DOM.Web ComponentsInteroperable & future-readyEvery Lit component is a native web component, with the superpower of interoperability. Web components work anywhere you use HTML, with any framework or none at all. This makes Lit ideal for building shareable components, design systems, or maintainable, future-ready sites and apps.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`

Hello, ${this.name}!

`; }}import {html, css, LitElement} from 'lit'; export class SimpleGreeting extends LitElement { static styles = css`p { color: blue }`; static properties = { name: {type: String}, }; constructor() { super(); this.name = 'Somebody'; } render() { return html`

Hello, ${this.name}!

`; }}customElements.define('simple-greeting', SimpleGreeting);Edit this example in the Lit PlaygroundCustom ElementsLit components are standard custom elements, so the browser treats them exactly like built-in elements. Use them in hand-written HTML or framework code, output them from your CMS or static site builder, even create instances in JavaScript — they just work!Scoped stylesLit scopes your styles by default, using Shadow DOM. This keeps your CSS selectors simple and ensures that your component’s styles don't affect — and aren't affected by — any other styles on the page.Reactive propertiesDeclare reactive properties to model your component’s API and internal state. A Lit component efficiently re-renders whenever a reactive property (or corresponding HTML attribute) changes.Declarative templatesLit templates, based on tagged template literals, are simple, expressive and fast, featuring HTML markup with native JavaScript expressions inline. No custom syntax to learn, no compilation required.Build anything with LitShareable ComponentsNeed to deliver interactive content or features that drop into any site, built on any stack? Because they're natively supported by browsers, web components are the perfect solution — and Lit makes them easy to build.Design SystemsA design system helps you create experiences that are consistently excellent and on brand. But what if your organization uses multiple frameworks? With Lit, you can build one set of components that works for every team.Sites and AppsUse Lit components to progressively enhance a static site, or build an entire app. By embracing Web Components, Lit minimizes lock-in and promotes maintainability: update or migrate one component at a time, without disrupting product development.Many of the world's most forward-looking organizations are building with LitSpectrum Web ComponentsAuro Design SystemMomentum UIMany projectsFrontend UICarbon Web ComponentsLion Web ComponentsPharos Design SystemPWA StarterOne Platform ComponentsUI5 Web ComponentsComponentsHilla FrameworkClarity CoreWired ElementsExplore LitTry our live tutorials — no installation neededTutorialsTinker with our interactive examplesPlaygroundDive deep with our extensive docsDocumentationCheck out all the options for jumping inGet startedConnect with Lit and the web components communityStay up to date with new releases, learn more about how to use web components and share projects and feedback with our team. All community participation is subject to Lit’s Code of Conduct — be excellent to each other!Lit Discord Chat about Lit with the Lit community and dev teamTwitter Stay up to date with the latest newsGitHub File issues, read the code, and make contributionsStack Overflow Ask and answer questions about Lit Copyright Google LLC. Code licensed under BSD-3-Clause. Documentation licensed under CC-BY-3.0.enen1728412201https://lit.dev

Sahypaňyzy redaktirläňmi?

Näme edýärsiň?