search

lit / lit

Lit is a simple library for building fast, lightweight web components.
https://lit.dev
BSD 3-Clause "New" or "Revised" License
18.45k stars 915 forks source link

CSSResultArray leaks #2650

Closed busynest closed 2 years ago

busynest commented 2 years ago

Description

CSSResultArray loads all non lazy-loaded Modular styles into primary HTML Document's <head> tag. This causes glitches to show CSS crossed out in the Inspector, but actually takes first order and overrides.

Steps to Reproduce

Document Structure:

HTML: <application-shell>

doc 1: CSS Modules Document

export const _colours : CSSResult = css` :host { color: green; } `;
export const _appShell : CSSResult = css` :host { color: blue; } `;
export const _homePage : CSSResult = css` :host { color: red; } `;

doc 2: application-shell static get styles():CSSResultArray { return [ _colours, _appShell ...

doc 3: home-page static get styles():CSSResultArray { return [ _colours, _homePage ...

Expected Results

I expected my <head> to be clean and isolated from Modules.

A similar