abeisgoat/app.js

## app.js
import {
  LitElement,
  html,
  css,
} from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";

export class SimpleGreeting extends LitElement {
  static properties = {
    name: {},
  };
  // Define scoped styles right with your component, in plain CSS
  static styles = css`
    :host {
      * {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none !important;
        touch-action: manipulation;
      }
      body {
        padding: 0px;
        margin: 0px;
        position: fixed;
        width: 100%;
        height: calc(100% - env(safe-area-inset-top));
        overflow: hidden;
      }
    }
  `;

  constructor() {
    super();
    // Declare reactive properties
    this.name = "World";
  }

  // Render the UI as a function of component state
  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define("simple-greeting", SimpleGreeting);

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Simplit</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=400, user-scalable=no, viewport-fit=cover"
    />
    <meta name="description" content="Simple Lit.dev Boilerplate" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <script type="module" src="app.js"></script>
    <script>
      // Stop pinch to zoom n junk
      document.addEventListener("click", function (e) {
        e.preventDefault();
      });
      document.addEventListener("gesturestart", function (e) {
        e.preventDefault();
      });
      document.addEventListener("touchstart", function (e) {
        e.preventDefault();
      });
    </script>
    <style>
      * {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none !important;
        touch-action: manipulation;
      }
      body {
        padding: 0px;
        margin: 0px;
        position: fixed;
        width: 100%;
        height: calc(100% - env(safe-area-inset-top));
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <simple-greeting name="Abe"></simple-greeting>
  </body>
</html>
	import {
	LitElement,
	html,
	css,
	} from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";

	export class SimpleGreeting extends LitElement {
	static properties = {
	name: {},
	};
	// Define scoped styles right with your component, in plain CSS
	static styles = css`
	:host {
	* {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none !important;
	touch-action: manipulation;
	}
	body {
	padding: 0px;
	margin: 0px;
	position: fixed;
	width: 100%;
	height: calc(100% - env(safe-area-inset-top));
	overflow: hidden;
	}
	}
	`;

	constructor() {
	super();
	// Declare reactive properties
	this.name = "World";
	}

	// Render the UI as a function of component state
	render() {
	return html`<p>Hello, ${this.name}!</p>`;
	}
	}
	customElements.define("simple-greeting", SimpleGreeting);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simplit</title>
	<meta charset="utf-8" />
	<meta
	name="viewport"
	content="width=400, user-scalable=no, viewport-fit=cover"
	/>
	<meta name="description" content="Simple Lit.dev Boilerplate" />
	<meta
	name="apple-mobile-web-app-status-bar-style"
	content="black-translucent"
	/>
	<script type="module" src="app.js"></script>
	<script>
	// Stop pinch to zoom n junk
	document.addEventListener("click", function (e) {
	e.preventDefault();
	});
	document.addEventListener("gesturestart", function (e) {
	e.preventDefault();
	});
	document.addEventListener("touchstart", function (e) {
	e.preventDefault();
	});
	</script>
	<style>
	* {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none !important;
	touch-action: manipulation;
	}
	body {
	padding: 0px;
	margin: 0px;
	position: fixed;
	width: 100%;
	height: calc(100% - env(safe-area-inset-top));
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<simple-greeting name="Abe"></simple-greeting>
	</body>
	</html>