styled-webcomponents
styled-components like library for web components
Warning
Very early stage. Not production ready!
Example
import { styled, define } from 'styled-webcomponents';
// Create a <Title> component which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// Create a <Wrapper> component with
// some padding and a papayawhip background
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Register the components
define({ tag: "project-title" }, Title);
define({ tag: "project-wrapper"}, Wrapper);
<!-- Use them like any other dom element – except they're styled! -->
<project-wrapper>
<project-title>
Hello World, this is my first styled webcomponent!
</project-title>
</project-wrapper>