tjwudi/react-shadow-dom

Use Shadow DOM with React.js and CSS imports, forked from Wildhoney/ReactShadow

ReactShadowDOM

   

• 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!

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 should be an array:

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

You can specify prefix for all paths in cssDocuments.

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

cssSource property can be used to inject CSS string. When both cssDocuments and cssSource are defined, style defined via cssSource will be attached after cssDocuments styles. Which means style defined via cssSource may override those defined in cssDocuments.

ReactShadow.cssDocumentsPrefix = '../css/';
var ReadmeApp = $react.createClass({
    mixins: [ReactShadow],
    cssSource: 'section { background-color: green; }'
});

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>
    }
});