Hacker News new | ask | show | jobs
by taf2 2458 days ago
You mean https://www.styled-components.com/ ? I am curious how the components can be themed? My understanding is web components use shadow dom isolating their dom tree from the outer document so wasn’t sure if it is possible to have an outer document css file provide theme colors to the components?
2 comments

Are you asking something along these lines: https://css-tricks.com/styling-a-web-component/, not clear on how both questions are related.
styled-components is a module used specifically with react.js (i.e. not web components).

Theming is actually handled quite nicely[1]. Essentially, you create a JS object which represents your theme (colours, fonts, spacing etc.) and pass it to a provider component. This will then provide the theme object to any components beneath it in the component tree, so you can pull out values and use them to style your app.

[1] https://www.styled-components.com/docs/advanced#theming