3 ms·
FYI, component styles in Sciter can be placed directly in JS module using `CSS.set` string literal (gets compiled at runtime to special style set object). The
by c-smile 4y ago
FYI, component styles in Sciter can be placed directly in JS module using `CSS.set` string literal (gets compiled at runtime to special style set object).
The style set is a collection of styles rules local (rooted at) to the component.
:root denotes the component to which styleset is applied.
The style set definition is strictly local to the component - rules inside it do not pollute global style table. That is close to <style scoped> to anyone who remember such thing.
Here is how styled component.js module looks like:
const padding = "12px";
const styleset = CSS.set`
:root {
color: var(--theme-color);
padding:${padding};
background: var(--theme-back);
}
:root > em {
color: gold;
}`
export class TestComponent extends Element {
render() {
return <div styleset={styleset}>
Hello <em>Embedded</em> Style Set
</div>;
}
}
IMHO, that's the best of two worlds - components may have local styles principal for their operation, and to use global styles that define macro properties like themed colors, etc.
- spankalee 4y agoThis 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).