So in a previous (now removed) post, I ranted a little about how react didn't seem to get along with web components and the 'is' property.

It turned out I was wrong. 'is' works just fine. The heart of the bug was that the Chromecast feature for the browser wasn't a modern web component. It used an older API that required a bit of hackery to work (in fact, an older DOM API that is also now deprecated).

After Material-UI said it might be a React problem, and React saying it wasn't, The Chromium team finally got the bug through to the Chromecast team, and they have since updated the component to using the current web component standards. In react, this is now working just fine.

The new syntax is a simple custom element <google-cast-launcher>. Babel will see that in JSX and convert it to "document.createElement('google-cast-launcher')" and all will work provided the browser is Chrome (it'll just do nothing on other browsers) and the Chromecast framework has been initialized.

The element by default is huge, but you can scale it down using width and height. For material behavior (ripple effects), I've made a stackblitz to demonstrate how to embed it inside a regular Material-UI Button component.

Demo and Code:

Material-UI 1.x uses JSS as a CSS-in-JS solution. One thing to note is the instance of google-cast-launcher. Unlike DOM and Component elements in JSX, where one normally uses className= to specify a class, React and babel treat web components differently. They take the properties and turn them all directly into attributes on the component when it construct the component. This means that you have to use class= instead of className=.