Proposal: work around styled-jsx `classname` attribute bug

[dylanjha]

vercel/styled-jsx#647 has been pretty much silent, so it might be worth it for us to workaround that issue ourselves.

The underlying problem is described in #24

TLDR is that custom elements end up getting an attribute classname instead of class.

Can we work around this by doing the following:

• Observe classname attribute and assign it to the element's class

Are there any downsides or side-effects to doing this? Many, many people are going to run into this. styled-jsx is pretty widely used so we need to fix this in one way or the other otherwise developers are going to really have a BadTime ™️

cc:/ @mmcc -- had this idea when we were chatting

[jaredsmith]

At least in the React world, it's standard practice to observe the classname attribute and assign it to the element's class.

[cjpillsbury]

cool. I think if we go this route we should keep that code as separate as possible on the hope and dream that it gets resolved "correctly", since we'll be adding React-specific code to components that shouldn't have to "know about" react and we'll also probably want to make this available for anyone trying to write their own media chrome elements in the interim.

[mmcc]

Yeah this feels like something we should do in the base component so everyone gets it for free, but I also agree we should treat this as a temporary fix we're hoping to remove once things are improved upstream.

That being said, I love this, though I am admittedly biased 😅