Westbrook/LitComponent.css.ts

## hz-lit-component.ts
import { LitComponent } from "./LitComponent.js";

export const TAG_NAME = "hz-lit-component";

if (!customElements.get(TAG_NAME)) {
    customElements.define(TAG_NAME, LitComponent);
}

declare global {
    interface HTMLElementTagNameMap {
        [TAG_NAME]: LitComponent;
    }
}

## index.html
<!DOCTYPE html>
<head>
  <script type="module" src="./hz-lit-component.js"></script>
</head>
<body>
  <button id="remove">Remove</button>
  <hz-lit-component></hz-lit-component>
  <script>
    document.remove.addEventListener('click', ({target}) => target.nextElementSibling.remove());
  </script>
</body>

## LitComponent.css.ts
import { css } from "lit";

export const style = css`
    :host {
        border: 1px solid black;
        display: block;
        width: 100%;
        padding: 10px;
    }
`;

## LitComponent.ts
import { html, LitElement } from "lit";

import { style } from "./LitComponent.css.js";

import type { TemplateResult } from "lit";

export class LitComponent extends LitElement {
    public static readonly styles = style;

    public render(): TemplateResult {
        return html` <p>This is a simple component using LitCompoent</p> `;
    }
}

## package.json
{
  "dependencies": {
    "lit": "^2.0.0",
    "@lit/reactive-element": "^1.0.0",
    "lit-element": "^3.0.0",
    "lit-html": "^2.0.0"
  }
}

## zzzzzzzzzz-lit-dev-playground-metadata.json
{
  "files": {
    "LitComponent.ts": {
      "position": 0
    },
    "index.html": {
      "position": 1
    },
    "package.json": {
      "position": 2,
      "hidden": true
    },
    "LitComponent.css.ts": {
      "position": 3
    },
    "hz-lit-component.ts": {
      "position": 4
    }
  }
}
	import { LitComponent } from "./LitComponent.js";

	export const TAG_NAME = "hz-lit-component";

	if (!customElements.get(TAG_NAME)) {
	customElements.define(TAG_NAME, LitComponent);
	}

	declare global {
	interface HTMLElementTagNameMap {
	[TAG_NAME]: LitComponent;
	}
	}
	<!DOCTYPE html>
	<head>
	<script type="module" src="./hz-lit-component.js"></script>
	</head>
	<body>
	<button id="remove">Remove</button>
	<hz-lit-component></hz-lit-component>
	<script>
	document.remove.addEventListener('click', ({target}) => target.nextElementSibling.remove());
	</script>
	</body>
	import { css } from "lit";

	export const style = css`
	:host {
	border: 1px solid black;
	display: block;
	width: 100%;
	padding: 10px;
	}
	`;
	import { html, LitElement } from "lit";

	import { style } from "./LitComponent.css.js";

	import type { TemplateResult } from "lit";

	export class LitComponent extends LitElement {
	public static readonly styles = style;

	public render(): TemplateResult {
	return html` <p>This is a simple component using LitCompoent</p> `;
	}
	}
	{
	"dependencies": {
	"lit": "^2.0.0",
	"@lit/reactive-element": "^1.0.0",
	"lit-element": "^3.0.0",
	"lit-html": "^2.0.0"
	}
	}
	{
	"files": {
	"LitComponent.ts": {
	"position": 0
	},
	"index.html": {
	"position": 1
	},
	"package.json": {
	"position": 2,
	"hidden": true
	},
	"LitComponent.css.ts": {
	"position": 3
	},
	"hz-lit-component.ts": {
	"position": 4
	}
	}
	}