Styled Web Components
#javascript#webcomponents#css#showdev
Alfredo Salzillo

Alfredo Salzillo @alfredosalzillo

About: 🐺

Location:
Italy
Joined:
Nov 8, 2018

Styled Web Components

Publish Date: Aug 19 '19
37 6

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?

Comments 6 total

  • Ashish Shubham
    Ashish ShubhamAug 20, 2019

    This creates copies of your styles in each instance of the component. Hence not reccommended

    • Alfredo Salzillo
      Alfredo SalzilloAug 21, 2019

      This is not true.

      Styles are not injected inside a <style></style>, nor in the style attribute, but are injected inside a shared instance of CSSStyleSheet adopted 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:

      styled.div`
  background-color: black;
`
styled.span`
  background-color: black;
`
styled.button`
  background-color: black;
`

      The instances of the three styled-components share the same class name.

      • Ashish Shubham
        Ashish ShubhamAug 21, 2019

        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 ?

        • Alfredo Salzillo
          Alfredo SalzilloAug 21, 2019

          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.

  • Victor Vincent
    Victor VincentAug 21, 2019

    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 :(

  • codelitically_incorrect
    codelitically_incorrectAug 31, 2019

    lame, bad practice

Add comment