Skip to content

Commit

Permalink
Limit the meaning of "custom element" to not include is
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
sebmarkbage committed Mar 30, 2023
1 parent 5ddcfd2 commit c2122f8
Show file tree
Hide file tree
Showing 4 changed files with 10 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2604,7 +2604,7 @@ export function pushStartInstance(
);
}
default: {
if (type.indexOf('-') === -1 && typeof props.is !== 'string') {
if (type.indexOf('-') === -1) {
// Generic element
return pushStartGenericElement(target, props, type);
} else {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ function warnUnknownProperties(type, props, eventRegistry) {
}

export function validateProperties(type, props, eventRegistry) {
if (isCustomElement(type, props)) {
if (isCustomElement(type, props) || typeof props.is === 'string') {
return;
}
warnUnknownProperties(type, props, eventRegistry);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-dom-bindings/src/shared/isCustomElement.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

function isCustomElement(tagName: string, props: Object): boolean {
if (tagName.indexOf('-') === -1) {
return typeof props.is === 'string';
return false;
}
switch (tagName) {
// These are reserved SVG and MathML elements.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -669,8 +669,14 @@ describe('ReactDOMServerIntegration', () => {
}
});

itRenders('htmlFor attribute on custom elements', async render => {
itRenders('htmlFor property on is elements', async render => {
const e = await render(<div is="custom-element" htmlFor="test" />);
expect(e.getAttribute('htmlFor')).toBe(null);
expect(e.getAttribute('for')).toBe('test');
});

itRenders('htmlFor attribute on custom elements', async render => {
const e = await render(<custom-element htmlFor="test" />);
expect(e.getAttribute('htmlFor')).toBe('test');
expect(e.getAttribute('for')).toBe(null);
});
Expand Down

0 comments on commit c2122f8

Please sign in to comment.