TypeOverflow

Cover image for Styled Web Components
Tyler Chipman
Tyler Chipman

Posted on

Styled Web Components

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;
  }
Enter fullscreen mode Exit fullscreen mode
// set up observedAttributes
  .observeAttributes(['disabled']);
Enter fullscreen mode Exit fullscreen mode
// Define the styled button as extension of the native button
customElements.define('styled-button', StyledButton, {
  extends: 'button',
});
Enter fullscreen mode Exit fullscreen mode

and use it

<button is="styled-button">Styled Button</button>
<button is="styled-button" disabled>Styled Button</button>
Enter fullscreen mode Exit fullscreen mode

In the end

Styled components are awesome and are so useful why not use them with web-components?

Latest comments (0)