DEV Community

Discussion on: LitElement: using web components

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦 • Edited

Awesome post. Way to go!

If you're using Rollup to bundle your app, you can import styles from CSS with this plugin:

npm.im/rollup-plugin-lit-css

import { LitElement, html } from 'lit-element';
import style from './my-element.css';

class MyElement extends LitElement {
  static styles = style;
  render() {
    return html`<h1>🍰</h1>`;
  }
}
Enter fullscreen mode Exit fullscreen mode

Which is precisely equivalent to :

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

class MyElement extends LitElement {
  static styles = css`/*... contents of my-element.css */`;
  render() {
    return html`<h1>🍰</h1>`;
  }
}
Enter fullscreen mode Exit fullscreen mode

I hope this tides us over until the css modules proposal is implemented across browsers