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