I was just saying encouraging this pattern on the wrong component could trigger a full-page reconcile which is not ideal. But not the end of the world.

cc @sebmarkbage -- another use case for x:frag.

@hedgerwang what if instead we had a ReactStyleHead component whose implementation looked like this:

```js
var ReactStyleHead = React.createClass({
  componentDidMount: function() {
    ReactStyle.addEventListener('change', this.handleStyleChange);
  },
  componentWillUnmount: function() {
    ReactStyle.removeEventListener('change', this.handleStyleChange);
  },
  handleStyleChange: function() {
    this.forceUpdate();
  },
  render: function() {
    return this.transferPropsTo(<head>{this.props.children}{ReactStyle.renderToComponents()}</head>);
  }
});
```

Then in this page I just change <head> to <ReactStyleHead> and that's it.

This has a few nice properties in that we guarantee to only reconcile this one component on style change, and we ensure we add/remove the event handlers correctly everywhere.

In fact, you could take this a step further and do `React.DOM.head = ReactStyleHead` (it would be better to use our injection API for it) and have a beautiful (though magical) interface. I personally favor making it explicit, but ymmv.

What do you think?