Styling web components

[samdenty]

• emotion version: 9.1.1
• react version: 16.3.0

Relevant code.

const WebComponent = styled('web-component')`
  color: red
`

Problem description:

React supports rendering custom DOM elements as long as they have a hyphen in the tag name. React completely ignores props on these components, including the className prop.

As a result, the prop is converted into a literal attribute in the DOM (and className is an invalid attribute).

Suggested solution:

If the passed tagName is a string, and it contains a hyphen - react-emotion should instead pass down a class prop, allowing Web Components to be styled.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.