4 ms·
This is almost exactly how Lit works in browsers. CSS is included with a css`` template string, that contains standard CSS. :host is used to select the host ele
by spankalee 4y ago
This is almost exactly how Lit works in browsers. CSS is included with a css`` template string, that contains standard CSS. :host is used to select the host element, as is standard.
@customElement('simple-greeting')
class SimpleGreeting extends LitElement {
static styles = css`
:host {
display: flex;
}
p {
color: blue;
}
`;
render() {
return html`<p>Hello, World!</p>`;
}
}
So you get CSS that loads with components, is scoped, and bundles without plugins. It's pretty great.
- c-smile 4y agoYes, that's close. Only one thing: that static styles construct shall eventually go into a separate <style> DOM element inside shadow root. Probably not a big deal if there are not that many such components.
- spankalee 4y agoActually, we add the stylesheet objects directly to the shadow root, so they're shared and there's no <style> tags (on supported browsers).