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

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? — Alan Dávalos, Aug 30 '19 at 03:29
@AlanDávalos thanks for the response! I have edited to include my reset.css — kyw, Aug 30 '19 at 05:40
btw I'm halfway(slow reader here..) reading this doc https://lit-element.polymer-project.org/guide/styles looks like I can't just do it the old cascade way... — kyw, Aug 30 '19 at 05:43
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) — Alan Dávalos, Aug 30 '19 at 05:52

score 8 · Accepted Answer · answered Aug 30 '19 at 07:24

8

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:

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%;
}
`;

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

answered Aug 30 '19 at 07:24

Alan Dávalos

2,568
11
19

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! – kyw Aug 30 '19 at 09:43
You could also create a base class that applies the global CSS and have all of your components extend that. – abraham Aug 30 '19 at 18:04
@kyw actually when you set styles using `static get styles` LitElement uses Constructable Stylesheets if the browser supports them – Alan Dávalos Sep 02 '19 at 02:43
Yeah I think I read that somewhere. What do you think about this post https://developers.google.com/web/updates/2019/02/constructable-stylesheets do you see we can use that for global css in lit-element? – kyw Sep 02 '19 at 02:54
@kyw the approach mentioned in that article is basically what LitElement does under the hood https://lit-element.polymer-project.org/guide/styles#static-styles https://github.com/Polymer/lit-element/blob/master/src/lib/css-tag.ts#L33-L50 – Alan Dávalos Sep 02 '19 at 03:01

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

1 Answers1