mcanthony / reactshadow

Use Shadow DOM with React.js and CSS imports; write your component styles in CSS!

ReactShadow

   

• Heroku: http://react-shadow.herokuapp.com/

---

With ReactShadow you can apply a Shadow DOM root inside of your component. Under normal React.js conditions, your styles are written inline for style encapsulation – with ReactShadow your styles can now be moved into their rightful place – within CSS documents!

Note: Take a look at the Maple.js framework, which is a React.js framework with Shadow DOM, HTML Imports, and Custom Elements. It has a lot of functionality that I was unable to integrate into a simple React.js mixin.

Getting Started

ReactShadow is implemented as a mixin that you can import into your component:

var ReadmeApp = $react.createClass({
    mixins: [ReactShadow]
});

From there ReactShadow will take over – creating a shadow root inside of your component, and importing any CSS documents defined in your cssDocuments property – which can be either an array or a function:

var ReadmeApp = $react.createClass({
    mixins: [ReactShadow],
    cssDocuments: ['../css/Default.css']
});

If you're applying CSS documents at runtime then it may well be useful to have the cssDocuments property as a function:

var ReadmeApp = $react.createClass({
    mixins: [ReactShadow],
    cssDocuments: function cssDocuments() {
        return ['../css/Component.css', '../css/' + this.props.cssDocument];
    }
});

You can inline css with cssSource property.

var ReadmeApp = $react.createClass({
    mixins: [ReactShadow],
    cssSource: "body { color: black; }"
});

When cssDocuments and cssSource are both defined, style defined in cssSource is appended after cssDocuments.

Event Retargeting

As Shadow DOM has the concept of Event Retargeting for encapsulation purposes, event delegation will not function correctly because all events will appear to be coming from the Shadow DOM – therefore ReactShadow uses the React ID for each element to dispatch the event from the original element, therefore maintaining React's event delegation implementation.

Events are therefore written in exactly the same way:

var ReadmeApp = $react.createClass({
    render: function render() {
        return <a onClick={this.reset} title="Reset Counter">
                   Reset, Comrade!
               </a>
    }
});