Importing unsafe styles directly from a .css file - Hint for beginners

[GHNewbiee]

It's assumed that css styles are in a file named myElementStyles.css.

Example:

myElement.js

import {LitElement, css, unsafeCSS, html} from 'lit';
import {customElement} from 'lit/decorators.js';

import myElementStyles from './myElementStyles.css';

@customElement('my-element')
export class MyElement extends LitElement {
  static styles = css`${unsafeCSS(myElementStyles)}`;
  ...
}

Important note (from the original documentation)

Only use the unsafeCSS tag with trusted input. Injecting unsanitized CSS is a security risk...