styled-custom-elements

UNSTABLE AND EXPERIMENTAL UNTIL FURTHER NOTICE

Styled (comparable to @emotion/styled) API for custom elements, built on top of Emotion.

Installation

Install using npm:

$ npm install styled-custom-elements

Usage

At the moment this package defaults to creating Custom Elements that extend their base elements (see MDN for Extended Custom Elements). In the future this will not be the case, with the package offering you the ability to opt-out of automatic extending and creating a wrapper around the base element in a Shadow DOM.

In order to use the package in this mode while targeting WebKit browsers (Safari Gnome Web/Epiphany, KDE Falkon) the Extended Custom Elements API must be polyfilled, due to the WebKit team not implementing this part of the spec. @ungap/custom-elements is the recommended polyfill for this.

To create an extended element, use the following JavaScript:

import styled from "styled-custom-elements";

const StyledAnchor = styled.a`
  color: pink;
  padding: 1rem;
`;

customElements.define("styled-anchor", StyledAnchor, { extends: "a" });

Then use your extended element in an HTML document:

<a is="styled-anchor">This is my padded, pink anchor!</a>

License

Copyright 2022 Kepler Sticka-Jones. Licensed MIT.