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