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.
References
- CSS: Cascading Style Sheets
- Constructible Style Sheets
- Adopt a Design System inside your Web Components with Constructable Stylesheets
Quick example
style.css
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}