28 Jan, 2025
CSS in JS
import style from './theme.css?inline';
@customElement('md3-lit')
export class RfMd3Lit extends RfTwLit {
static override styles = [unsafeCSS(style.replaceAll(':root', ':host'))];
}
Define properties with defaults
@customElement('md3-lit')
export class RfMd3Lit extends RfTwLit {
static {
if (!isServer) {
const styleSheets = Object.entries(
getSchemeProperties(defaultTheme.schemes.light)
).map(
([key, color]) =>
unsafeCSS(`
@property ${key} {
syntax: "<color>";
inherits: true;
initial-value: ${hexFromArgb(color)};
}
`).styleSheet as CSSStyleSheet
);
document.adoptedStyleSheets.push(...styleSheets);
}
}
}