Lit there be light

basic_component.ts

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

@customElement('my-element')
export class MyElement extends LitElement {
 @property() message = 'Hello world!'

  render(): TemplateResult {
   return html`
     <h1>${this.message}</h1>
   `
 }

 static styles = css`
   :host {
     text-align: center;
   }
 `
}

declare global {
 interface HTMLElementTagNameMap {
   'my-element': MyElement
 }
}

context.ts

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

import { createContext } from '@lit-labs/context'

export const userHashId = createContext<string>('userHashId')

@customElement('my-element')
export class MyElement extends LitElement {
 @provide({ context: userHashId })
 @property({ type: String, attribute: 'user-hash-id' }) userHashId = ''

 @consume({ context: userHashId, subscribe: true })
 public userHashId = ''

}

localization_1.ts

@localized()
@customElement('my-element')
export class MyElement extends LitElement {
  @property({ type: String }) locale = defaultLocale

  protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
   if (changedProperties.get('locale') && this.locale && changedProperties.get('locale') !== this.locale) {
     this.setLocale(this.locale.toLocaleLowerCase())
   }
 }

 private template = () => {
   return html`
     <h1>${msg('Welcome to the new era!', { id: 'welcome-message' })}</h1>
   `
 }

 private async setLocale(locale: string): Promise<void> {
   if (targetLocales.includes(locale)) {
     await setLocale(locale)
   }
 }

 override render(): TemplateResult {
   return html${cache(this.template())}
 }

}

localization_2.ts

import { configureLocalization, LocaleModule } from '@lit/localize'

import { sourceLocale, targetLocales } from '@data/locale'

import * as templates_es_es from '../locales/es-es'
import * as templates_zh_cn from '../locales/zh-cn'
import * as templates_ko_kr from '../locales/ko-kr'
import * as templates_fr_fr from '../locales/fr-fr'
import * as templates_ja_jp from '../locales/jp-ja'
import * as templates_pt_br from '../locales/pt-br'

const localizedTemplates: Map<string, LocaleModule> = new Map([
 ['es-es', templates_es_es],
 ['zh-cn', templates_zh_cn],
 ['ko-kr', templates_ko_kr],
 ['fr-fr', templates_fr_fr],
 ['ja-jp', templates_ja_jp],
 ['pt-br', templates_pt_br],
])

export const { getLocale, setLocale } = configureLocalization({
 sourceLocale,
 targetLocales,
 loadLocale: async (locale) => localizedTemplates.get(locale)!
})

property_bindings.ts

@customElement('my-element')
export class MyElement extends LitElement {
  @property({ type: String, attribute: 'user-avatar' }) userAvatar = ''
  @property({ type: Object, attribute: 'user-stats' }) userStats: IUserStats = Object.create({})
  @property({ type: Array, attribute: 'user-badges' }) userBadges: string[] = []
  @property({ type: String }) locale = defaultLocale
  @property({ type: Number }) userReputation = 0

  @property({ type: Booolean, attribute: 'is-logged-in' }) isLoggedIn = false

  @property({ type: String, attribute: 'is-not-collapsible', converter: (value, _type) => {
   if (value && value === 'true') {
     return true
   }
   return false
   }
  }) isNotCollapsible = false

  @state() public isCollapsed = false

}

style.scss

:host {
 position: sticky;
 top: 0;
}

:host(.is-collapsed) {
 position: static;
}

style.ts

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

import style from './assets/styles.scss?inline'

@customElement('my-element')
export class MyElement extends LitElement {

 // static readonly styles = css`:host { background-color: #ff0000; }`
 static readonly styles = css${unsafeCSS(style)}

}

declare global {
 interface HTMLElementTagNameMap {
   'my-element': MyElement
 }
}

subcomponents.ts

import './blocks/block_profile'
import { BlockProfile } from './blocks/block_profile'

import './blocks/block_nav'
import { BlockNav } from './blocks/block_nav'

@customElement('sidebar')
export class Sidebar extends LitElement {

 private template = () => {
   return html`
     <block-profile
       ?hidden=${!this.isSignedIn}
       .userName=${this.userName}
       .userStats=${this.userStats}
     ></block-profile>

     <block-nav
       class="block-nav"
       .isSignedIn=${this.isSignedIn}
     ></block-nav>
   `
 }

 override render(): TemplateResult {
   return html${cache(this.template())}
 }
}

declare global {
 interface HTMLElementTagNameMap {
   'sidebar': Sidebar,
   'block-nav': BlockNav,
   'block-profile': BlockProfile,
 }
}