Lit-Element: How do I set global/reset css

Question

What is the current best practice to set global/reset CSS if I'm using Lit-element?

I have tried 1) Inline them in <style> in my document root, 2) Construction stylesheet like this answer

<script>
  var css = new CSSStyleSheet()
  css.replace('@import url("./style/static/reset.css")')
  document.adoptedStyleSheets = [css]
</script>

but nothing works...

EDIT My reset.css:

blockquote,
body,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
p,
pre,
button,
ul {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

I'm building on top of folder structure scaffolded from https://open-wc.org/guide/#quickstart

Fiorenza

It depends a lot on the architecture of your application and which specific css properties you want to reset, can you post the contents of your reset.css? – Cham

@AlanDávalos thanks for the response! I have edited to include my reset.css – Fiorenza

btw I'm halfway(slow reader here..) reading this doc lit-element.polymer-project.org/guide/styles looks like I can't just do it the old cascade way... – Fiorenza

No problem, everyone has their own learning speed, for web components, you (usually) can't do it the old cascade way but there are ways to achieve what you want (I plan on writing a longer explanation on why is that and what you can do if no one else has done it by then) – Cham

Yes please! Looking forward! – Fiorenza

Answer 1

This won't work as you expected because LitElement by default uses Shadow DOM which is designed to prevent external CSS from affecting the component's inner tree (and vice versa)

The only way to affect the styles inside a web component is if the component uses CSS variables or if properties that inherit styles are undefined inside the web component (for more info check this guide)

However, if this is a project fully based on LitElement, you can share styles between components quite easily and use that to do this reset:

1. First create a js file for your shared css (e.g. reset-css.js)

import { css } from 'lit-element';

export default css `
blockquote,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
p,
pre,
button,
ul {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}
`;

2. Then import your style in your components

import {LitElement, html, css} from 'lit-element';

// include your reset styles
import resetCSS from './reset-css.js';

class MyComponent extends LitElement {

  static get styles() {
    // this is the important part, this array includes our resetted styles and this components styles
    return [
      resetCSS, 
      css`
        h1 {
          color: blue;
        }
      `
    ]; 
  }
  
  render() {
    html`<h1>Something Blue</h1>`
  }
}

And just like that, any component which includes the shared reset styles will use them

Einkorn

I see. Thank you for the answer! It's a bit repetitive overall compared to just cascade. The Constructable Stylesheet method seems like the way forward in the future for this use case; setting it on the document. I tried that but no luck. Anyway, it's still bleeding edge, so I will just go with your method for now :) Thanks again! – Fiorenza

You could also create a base class that applies the global CSS and have all of your components extend that. – Eloisaeloise

@Fiorenza actually when you set styles using static get styles LitElement uses Constructable Stylesheets if the browser supports them – Cham

Yeah I think I read that somewhere. What do you think about this post developers.google.com/web/updates/2019/02/… do you see we can use that for global css in lit-element? – Fiorenza

@Fiorenza the approach mentioned in that article is basically what LitElement does under the hood lit-element.polymer-project.org/guide/styles#static-styles github.com/Polymer/lit-element/blob/master/src/lib/… – Cham

Answer 2

Implemented a utility class so you don't have to type everything over again in your components.

import { CSSResultGroup, LitElement } from "lit";
import { resetCSS } from "../styles/reset.css.ts";
import { customCss } from "../styles/custom.css.ts";

export abstract class Component extends LitElement {
    // Small hack to include global styles

    private static _styles: CSSResultGroup;

    static get styles(): CSSResultGroup {
        const derivedStyles = this._styles || [];
        return [
            resetCSS,
            customCss,
            ...(Array.isArray(derivedStyles) ? derivedStyles : [derivedStyles]),
        ];
    }

    static set styles(styles: CSSResultGroup) {
        this._styles = styles;
    }
}

You can now set styles as you are used to:

@customElement("app-root")
export class MyElement extends Component {

    static styles = [
        css`
            :host {
                max-width: 1280px;
                margin: 0 auto;
                padding: 2rem;
                text-align: center;
            }
        `,
    ];
//...

Moramorabito