Template/Scafold to use when writing a Lit (Element/HTML/CSS) from scratch.

LitScafold.js

import {LitElement, html, css} from "lit";

class MyElement extends LitElement {
	/**
	 * Reactive Properties
	 */
	static properties = {
		name: {type: String, attribute: true, reflect: false},
	};
	
	
	/**
	 * CSS Shadow Root Styles
	 */
	static styles = css`
		div { color: red; }
	`;


	/**
	 * HTML Template
	 */
	render() {
		return html`<div>I'm styled</div>`;
	}


	// LIFECYLE METHODS ---------------------------------------------------------------------------

	/**
	 * Element is created or upgraded.
	 * (One time initialization tasks)
	 */
	constructor() {
		super();
	}


	/**
	 * Component was added to the document's DOM.
	 * (Add event listeners)
	 */
	connectedCallback() {
		super.connectedCallback();
	}


	/**
	 * Component was removed from the document's DOM.
	 * (Undo connected callback)
	 */
	disconnectedCallback() {
		super.disconnectedCallback();
	}


	/**
	 * Element's DOM has been updated for the first time.
	 * (Perform work after component's DOM created)
	 * @param changedProperties {Map} keys are names of changed props, values are previous values.
	 */
	firstUpdated(changedProperties) {
		super.firstUpdated(changedProperties);
	}


	/**
	 * Element's DOM has been updated.
	 * (Peform work everytime attributes change)
	 * @param changedProperties {Map}
	 */
	updated(changedProperties) {
		super.updated(changedProperties);
	}
}

customElements.define('my-element', MyElement);