lit-reset-css

English | 简体中文

When building Web Components with Lit, we often want consistent base styles (true global CSS) across all isolated Shadow DOMs.

lit-reset-css is both a methodology and a practical implementation. It provides an extended LitElement base class that automatically injects CSS reset styles into every component that inherits from it.

The principle is to intercept the initialization lifecycle of Lit's original LitElement base class, thereby seamlessly combining the reset styles with the component's own styles.

Usage

When using Lit to build Web Components, we typically import its LitElement:

import { LitElement } from "lit";

The philosophy of lit-reset-css is minimal change: just change this line for a painless migration:

- import { LitElement } from "lit";
+ import { LitElement } from "./lib.ts";

Running the Example

The project includes an example file (compare-example.ts) that compares two identically structured components.

Run it locally to see the differences:

# Install dependencies
pnpm install

# Start the dev server
pnpm dev

License

Licensed under either of Apache License, Version 2.0 or MIT license at your option.

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in this project by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.