Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix rendering into shadow root (#11037)

Browse Source 
* Replace skipped unit test with a fixture

* Fix crash for custom elements
This commit is contained in:
Dan Abramov
2017-10-02 20:50:14 +01:00
committed by GitHub
parent bbb272f3aa
commit 8b4ec79d4f
6 changed files with 69 additions and 6424 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/__mocks__/vendor/third_party/WebComponents.js
Vendored
-6379
View File
File diff suppressed because it is too large Load Diff
src/renderers/dom/fiber/ReactDOMFiberEntry.js
+18 -11
View File
@@ -163,17 +163,24 @@ var DOMRenderer = ReactFiberReconciler({
getRootHostContext(rootContainerInstance: Container): HostContext {
let type;
let namespace;
if (rootContainerInstance.nodeType === DOCUMENT_NODE) {
type = '#document';
let root = (rootContainerInstance: any).documentElement;
namespace = root ? root.namespaceURI : getChildNamespace(null, '');
} else {
const container: any = rootContainerInstance.nodeType === COMMENT_NODE
? rootContainerInstance.parentNode
: rootContainerInstance;
const ownNamespace = container.namespaceURI || null;
type = container.tagName;
namespace = getChildNamespace(ownNamespace, type);
const nodeType = rootContainerInstance.nodeType;
switch (nodeType) {
case DOCUMENT_NODE:
case DOCUMENT_FRAGMENT_NODE: {
type = nodeType === DOCUMENT_NODE ? '#document' : '#fragment';
let root = (rootContainerInstance: any).documentElement;
namespace = root ? root.namespaceURI : getChildNamespace(null, '');
break;
}
default: {
const container: any = nodeType === COMMENT_NODE
? rootContainerInstance.parentNode
: rootContainerInstance;
const ownNamespace = container.namespaceURI || null;
type = container.tagName;
namespace = getChildNamespace(ownNamespace, type);
break;
}
}
if (__DEV__) {
const validatedTag = type.toLowerCase();
src/renderers/dom/shared/__tests__/ReactMount-test.js
-34
View File
@@ -17,7 +17,6 @@ var React;
var ReactDOM;
var ReactDOMServer;
var ReactTestUtils;
var WebComponents;
describe('ReactMount', () => {
beforeEach(() => {
@@ -27,16 +26,6 @@ describe('ReactMount', () => {
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
ReactTestUtils = require('react-dom/test-utils');
try {
if (WebComponents === undefined && typeof jest !== 'undefined') {
WebComponents = require('WebComponents');
}
} catch (e) {
// Parse error expected on engines that don't support setters
// or otherwise aren't supportable by the polyfill.
// Leave WebComponents undefined.
}
});
describe('unmountComponentAtNode', () => {
@@ -201,29 +190,6 @@ describe('ReactMount', () => {
);
});
if (WebComponents !== undefined) {
it('should allow mounting/unmounting to document fragment container', () => {
var shadowRoot;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
shadowRoot = this.createShadowRoot();
ReactDOM.render(<div>Hi, from within a WC!</div>, shadowRoot);
expect(shadowRoot.firstChild.tagName).toBe('DIV');
ReactDOM.render(<span>Hi, from within a WC!</span>, shadowRoot);
expect(shadowRoot.firstChild.tagName).toBe('SPAN');
},
},
});
proto.unmount = function() {
ReactDOM.unmountComponentAtNode(shadowRoot);
};
document.registerElement('x-foo', {prototype: proto});
var element = document.createElement('x-foo');
element.unmount();
});
}
it('should warn if render removes React-rendered children', () => {
var container = document.createElement('container');