Skip to content

Commit 43a70a6

Browse files
authored
Limit the meaning of "custom element" to not include is (#26524)
This PR has a bunch of surrounding refactoring. See individual commits. The main change is that we no longer special case `typeof is === 'string'` as a special case according to the `enableCustomElementPropertySupport` flag. Effectively this means that you can't use custom properties/events, other than the ones React knows about on `<input is="my-input">` extensions. This is unfortunate but there's too many paths that are forked in inconsistent ways since we fork based on tag name. I think __the solution is to let all React elements set unknown properties/events 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. We still support passing the `is` prop and turn that into the appropriate createElement call. @josepharhar
1 parent 1308e49 commit 43a70a6

File tree

8 files changed

+185
-253
lines changed

8 files changed

+185
-253
lines changed

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

+8-40
Original file line numberDiff line numberDiff line change
@@ -253,10 +253,6 @@ export function getValueForAttributeOnCustomComponent(
253253
}
254254
return expected === undefined ? undefined : null;
255255
}
256-
if (enableCustomElementPropertySupport && name === 'className') {
257-
// className is a special cased property on the server to render as an attribute.
258-
name = 'class';
259-
}
260256
const value = node.getAttribute(name);
261257

262258
if (enableCustomElementPropertySupport) {
@@ -448,11 +444,7 @@ export function setValueForPropertyOnCustomComponent(
448444
name: string,
449445
value: mixed,
450446
) {
451-
if (
452-
enableCustomElementPropertySupport &&
453-
name[0] === 'o' &&
454-
name[1] === 'n'
455-
) {
447+
if (name[0] === 'o' && name[1] === 'n') {
456448
const useCapture = name.endsWith('Capture');
457449
const eventName = name.substr(2, useCapture ? name.length - 9 : undefined);
458450

@@ -477,40 +469,16 @@ export function setValueForPropertyOnCustomComponent(
477469
}
478470
}
479471

480-
if (enableCustomElementPropertySupport && name in (node: any)) {
472+
if (name in (node: any)) {
481473
(node: any)[name] = value;
482474
return;
483475
}
484476

485-
if (isAttributeNameSafe(name)) {
486-
// shouldRemoveAttribute
487-
if (value === null) {
488-
node.removeAttribute(name);
489-
return;
490-
}
491-
switch (typeof value) {
492-
case 'undefined':
493-
case 'function':
494-
case 'symbol': // eslint-disable-line
495-
node.removeAttribute(name);
496-
return;
497-
case 'boolean': {
498-
if (enableCustomElementPropertySupport) {
499-
if (value === true) {
500-
node.setAttribute(name, '');
501-
return;
502-
}
503-
node.removeAttribute(name);
504-
return;
505-
}
506-
}
507-
}
508-
if (__DEV__) {
509-
checkAttributeStringCoercion(value, name);
510-
}
511-
node.setAttribute(
512-
name,
513-
enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
514-
);
477+
if (value === true) {
478+
node.setAttribute(name, '');
479+
return;
515480
}
481+
482+
// From here, it's the same as any attribute
483+
setValueForAttribute(node, name, value);
516484
}

0 commit comments

Comments
 (0)