diff --git a/src/index.js b/src/index.js
index bf6fe95..31faef0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -41,6 +41,7 @@ export default function (CustomElement, opts) {
static get propTypes() {
return {
children: React.PropTypes.any,
+ style: React.PropTypes.any,
};
}
componentDidMount() {
@@ -49,7 +50,7 @@ export default function (CustomElement, opts) {
componentWillReceiveProps(props) {
const node = ReactDOM.findDOMNode(this);
Object.keys(props).forEach(name => {
- if (name === 'children') {
+ if (name === 'children' || name === 'style') {
return;
}
@@ -61,7 +62,7 @@ export default function (CustomElement, opts) {
});
}
render() {
- return React.createElement(tagName, null, this.props.children);
+ return React.createElement(tagName, { style: this.props.style }, this.props.children);
}
};
}
diff --git a/test/unit/props.js b/test/unit/props.js
index e064c2b..603b493 100644
--- a/test/unit/props.js
+++ b/test/unit/props.js
@@ -3,41 +3,69 @@ import React from 'react';
import ReactDOM from 'react-dom';
let x = 0;
-function createComponent(name, done) {
+function createComponentWithOpts(opts) {
return reactify(document.registerElement(`x-props-${x++}`, {
- prototype: Object.create(HTMLElement.prototype, {
- [name]: {
- get() {
- return 'test';
- },
- set(value) {
- if (done) {
- done(this, value);
- }
- },
- },
- }),
+ prototype: Object.create(HTMLElement.prototype, opts),
}), { React, ReactDOM });
}
+function createComponentWithProp(name, done) {
+ return createComponentWithOpts({
+ [name]: {
+ get() {
+ return 'test';
+ },
+ set(value) {
+ if (done) {
+ done(this, value);
+ }
+ },
+ },
+ });
+}
describe('props', () => {
+ it('should set style (object)', () => {
+ const Comp = createComponentWithOpts({});
+ ReactDOM.render(, window.fixture);
+ const elem = window.fixture.firstChild;
+ expect(elem.style.backgroundColor).to.equal('black');
+ expect(elem.style.width).to.equal('1px');
+ });
+
+ it('should set className', () => {
+ const Comp = createComponentWithOpts({});
+ ReactDOM.render(, window.fixture);
+ const elem = window.fixture.firstChild;
+ expect(elem.getAttribute('class')).to.equal('test');
+ });
+
it('should not set children', () => {
- const Comp = createComponent('children', () => { throw new Error('set children'); });
+ const Comp = createComponentWithProp('children', () => { throw new Error('set children'); });
ReactDOM.render(, window.fixture);
});
it('should not set events', () => {
- const Comp = createComponent('oncustomevent', () => { throw new Error('set oncustomevent'); });
+ const Comp = createComponentWithProp('oncustomevent', () => { throw new Error('set oncustomevent'); });
ReactDOM.render(, window.fixture);
});
it('should not set attributes', () => {
- const Comp = createComponent('test', elem => expect(elem.hasAttribute('test')).to.equal(false));
+ const Comp = createComponentWithProp('test', elem => expect(elem.hasAttribute('test')).to.equal(false));
ReactDOM.render(, window.fixture);
});
it('should set properties for anything else', () => {
- const Comp = createComponent('test', (elem, value) => expect(value).to.equal('test'));
+ const Comp = createComponentWithProp('test', (elem, value) => expect(value).to.equal('test'));
ReactDOM.render(, window.fixture);
});
+
+ it('should work with rest/spread properties', () => {
+ const Comp = createComponentWithProp('test');
+ const rest = { style: { color: 'white' }, test: 'test' };
+ ReactDOM.render(, window.fixture);
+ const elem = window.fixture.firstChild;
+ expect(elem.getAttribute('class')).to.equal('test');
+ expect(elem.style.color).to.equal('white');
+ expect(elem.test).to.equal('test');
+ });
});