CSS

Source file extensions: .css

Import in Javascript/Typescript

Import globally

import './style.css';
import 'https://web.site/style.css';

This form will transform the css file in a ES Module that append the css style in a <style> tag in the <header> of the page. In consequence, the styles will be applied globally to the host page.

Import as a CSSStyleSheet

import style from './style.css';
import style2 from 'https://web.site/style2.css';

This form will create a CSSStyleSheet for use with adoptedStylesheet in ShadowDOM (or not). See references for more details.

Import as a CSS Module

If the imported file ends with .module.css, then it's imported as a CSS Module.

/* index.js */
import styles from `./style.module.css`;
...
element.innerHTML = '<div class="' + styles.className + '">';

/* style.module.css */
.className {
  color: green;
}

References

• CSS: Cascading Style Sheets
• Constructible Style Sheets
• Adopt a Design System inside your Web Components with Constructable Stylesheets
• CSS Modules

Quick example

style.css

strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}