Styled Web Components

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?

Blog

Styled Web Components

Alfredo Salzillo

Pros

Example

In the end

Join Our Newsletter. No Spam, Only the good stuff.

Related