Skip to content

Commit 6c2a680

Browse files
committed
Limit the meaning of "custom element" to not include is
Effectively this means that you can't use custom properties/events, other than the ones React knows about on `is` extensions. This is unfortunate but there's too many paths that are forked in inconsistent ways. I think the solution is to let all React elements set unknown properties in the same way as this flag but that's a bigger change than this flag implies. Since `is` is not universally supported yet anyway, this doesn't seem like a huge loss. Attributes still work.
1 parent a09a9ca commit 6c2a680

File tree

5 files changed

+10
-6
lines changed

5 files changed

+10
-6
lines changed

packages/react-dom-bindings/src/client/ReactDOMComponent.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -657,7 +657,6 @@ export function setInitialProperties(
657657
}
658658
// defaultChecked and defaultValue are ignored by setProp
659659
default: {
660-
// TODO: If the `is` prop is specified, this should go through the isCustomElementTag flow.
661660
setProp(domElement, tag, propKey, propValue, false, props);
662661
}
663662
}
@@ -952,7 +951,6 @@ export function updateProperties(
952951
}
953952
// defaultChecked and defaultValue are ignored by setProp
954953
default: {
955-
// TODO: If the `is` prop is specified, this should go through the isCustomElementTag flow.
956954
setProp(domElement, tag, propKey, propValue, false, nextProps);
957955
}
958956
}

packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2604,7 +2604,7 @@ export function pushStartInstance(
26042604
);
26052605
}
26062606
default: {
2607-
if (type.indexOf('-') === -1 && typeof props.is !== 'string') {
2607+
if (type.indexOf('-') === -1) {
26082608
// Generic element
26092609
return pushStartGenericElement(target, props, type);
26102610
} else {

packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,7 @@ function warnUnknownProperties(type, props, eventRegistry) {
308308
}
309309

310310
export function validateProperties(type, props, eventRegistry) {
311-
if (isCustomElement(type, props)) {
311+
if (isCustomElement(type, props) || typeof props.is === 'string') {
312312
return;
313313
}
314314
warnUnknownProperties(type, props, eventRegistry);

packages/react-dom-bindings/src/shared/isCustomElement.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
function isCustomElement(tagName: string, props: Object): boolean {
1111
if (tagName.indexOf('-') === -1) {
12-
return typeof props.is === 'string';
12+
return false;
1313
}
1414
switch (tagName) {
1515
// These are reserved SVG and MathML elements.

packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -669,8 +669,14 @@ describe('ReactDOMServerIntegration', () => {
669669
}
670670
});
671671

672-
itRenders('htmlFor attribute on custom elements', async render => {
672+
itRenders('htmlFor property on is elements', async render => {
673673
const e = await render(<div is="custom-element" htmlFor="test" />);
674+
expect(e.getAttribute('htmlFor')).toBe(null);
675+
expect(e.getAttribute('for')).toBe('test');
676+
});
677+
678+
itRenders('htmlFor attribute on custom elements', async render => {
679+
const e = await render(<custom-element htmlFor="test" />);
674680
expect(e.getAttribute('htmlFor')).toBe('test');
675681
expect(e.getAttribute('for')).toBe(null);
676682
});

0 commit comments

Comments
 (0)