Warn about HTML within SVG tags#13516
Conversation
Details of bundled changes.Comparing: 1664b08...91ac38d react-dom
Generated by 🚫 dangerJS |
| case 'h5': | ||
| case 'h6': | ||
| return ancestorInfo.pTagInButtonScope; | ||
| return ( |
There was a problem hiding this comment.
These checks all look very similar, is there a refactoring you can do to make the logic clearer?
There was a problem hiding this comment.
I've tried putting it into a variable to avoid the repeated code
| return ancestorInfo.pTagInButtonScope || isValidHtmlInSvg; | ||
|
|
||
| case 'span': | ||
| return !ancestorInfo.foreignObjectInScope |
There was a problem hiding this comment.
One more code piece (span case) which could be replaced with isValidHtmlInSvg.
|
CI is saying that this PR is failing tests but they all complete successfully on my machine, any ideas as to why this might be happening? |
98ad03d to
e302cfa
Compare
Size changes (experimental)Details of bundled changes.Comparing: 4eeee35...e302cfa react-dom
|
Size changes (stable)Details of bundled changes.Comparing: 4eeee35...e302cfa react-dom
|
|
@gaearon I've revisited this PR & rebased to help all checks pass, do you think this is something we could look at again for merging? |
|
This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution. |
|
Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you! |
This PR aims to warn about nesting non-SVG HTML tags within SVG (similar to how developers are warned against nesting
<p>tags within<p>tags).Example:
Produces the following warning:

However, including the
<div>within a<foreignObject>Produces no errors message.
Ideally, I think the warning should include some messaging about wrapping HTML inside a foreignObject, i.e. '
<div>cannot appear as a descendant of<svg>, consider wrapping it inside a<foreignObject>', but I wasn't 100% sure on how to implement this with howvalidateDOMNesting.jscurrently works.closes #11013