Web Components Community πŸ”·

Alfredo Salzillo
Alfredo Salzillo

Posted on

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',
});
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 whit web-components?

Top comments (0)