Original Author: Alfredo Salzillo
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 with web-components?
Top comments (0)