Styled Components for React is awesome.
Why can't we style web components to?
With masquerades we can do that.
Pros
With styled web components:
- We can write CSS in js files, using tagged string
- we can write reactive CSS based on props value
- no need to think about unique class names or id
- we can style native web components and custom web components
- generated styled-web-components can be used inside light and shadow root, without manual manage stylesheet adoption
Example
Create a styled Native Button:
import styled from 'masquerades';
// Create the button
const StyledButton = styled.button`
background: ${({ disabled }) => (disabled ? 'grey' : '#f1c40f')};
color: #fff;
border: 3px solid #fff;
border-radius: 50px;
padding: 0.8rem 2rem;
font: 24px "Margarine", sans-serif;
outline: none;
cursor: pointer;
position: relative;
transition: 0.2s ease-in-out;
letter-spacing: 2px;
${({ disabled }) => disabled && styled.css`
border-radius: 15px;
`}
`
// set up observedAttributes
.observeAttributes(['disabled']);
// Define the styled button as extension of the native button
customElements.define('styled-button', StyledButton, {
extends: 'button',
});
and use it
<button is="styled-button">Styled Button</button>
<button is="styled-button" disabled>Styled Button</button>
In the end
Styled components are awesome and are so useful why not use them whit web-components?
Top comments (6)
I decided not to touch WebComponents until we can drop support for every IE and non-Chromium Edge as polyfills are just slow and limited. That's still a really long time to wait :(
This creates copies of your styles in each instance of the component. Hence not reccommended
This is not true.
Styles are not injected inside a
<style></style>, nor in thestyleattribute, but are injected inside a shared instance ofCSSStyleSheetadopted by the shadow root (if using it) and the outer root (light or shadow) of the element.Every time the style is recalculated, the style for the unique class name, calculate using only the CSS text of the parsed style, is injected in the CSSStyleSheet if not present.
As a plus, not only instances of the same component, share the same set of class names, but also different element with equals parsed CSS string.
For example:
The instances of the three styled-components share the same class name.
Well, if the instances share the same styles, how are you able to reactively change the styles based on props ? The styles for all instances would change based on props passed to a single instance ?
An unique class name, based on the style, is created and added to the element every time props changes. The old class name if present is removed.
Take a look at the code.
lame, bad practice