-
Notifications
You must be signed in to change notification settings - Fork 88
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Regarding limitations of expressions in styles #47
Comments
Styling limitations exist because of older browser support. It is not a library limitation. You can use expressions in Again, because of polyfills, Even though your example works, it brings a big performance cost. When you change For CSS in JS like approach, I recommend using inline styles, which are supported by the template engine: const App = {
isRed: true,
render: ({ isRed }) => html`
<h1 style={{ color: isRed ? "red" : "blue" }}>Hello World</h1>
`,
}; You can also create "helper" method, for creating your styles: const fontSize = {
normal: "1rem",
};
const style = isRed => ({
fontSize: fontSize.normal,
color: isRed ? "red" : "blue",
});
const App = {
isRed: true,
render: ({ isRed }) => html`
<h1 style={style(isRed)}>Hello World</h1>
`,
}; Although, creating dynamic styles at scale might have some performance impact. Creating a static style, and then using classes or other selectors for switching styles will always be faster. |
Thanks for the discussion. I was sure there were things I had not considered and expected as much. |
Reading the styling documentation - https://github.com/hybridsjs/hybrids/blob/master/docs/template-engine/styling.md - it says that due to how ShadyCSS works, expressions do not work for browsers that do not support Shadow DOM natively.
I think this is a big limitation to adoption of hybrids because css-in-js is growing ever popular.
I gave it a try and as expected it did not work when running Edge.
Then I kept on reading and saw the part about the style helper and wondered if that doesn't solve the problem anyway? Since it takes css as a string, that string does not have to come from an external file.
So I gave this a try,
And to my amazement this works in Edge! The style is properly scoped and the expression properly evaluated.
So styles with expressions can work with ShadyCSS as well!
You could also take advantage of state properties as well to change style based on them.
I don't see any immediate downsides to doing this but perhaps you do?
The text was updated successfully, but these errors were encountered: