New Liferay SVGs on a page may stop rendering if an invalid SVG has been added to DOM and later removed by JS

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.2.X
• Fix Version/s: 7.2.X
• Component/s: JS APIs and Utilities > Frontend JS Web API
• Labels:
  • ee-ts
  • liferay-fixpack-dxp-9-7210
• Branch Version/s:
  7.2.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Git Pull Request: https://github.com/liferay/liferay-portal-ee/pull/21727

Reproduction Steps:
1) Start 7.2.x
2) login as Admin
3) Create a Web content with the below code in the source tab:

<svg class="icon arrow down" role="presentation" focusable="false">
<use xlink:href="#arrow"></use>
</svg>
<svg class="icon arrow down" role="presentation" focusable="false">
<use xlink:href="#arrow"></use>
</svg>

4) Publish the web content and place it on the Welcome page through 2 different Web Content Display portlets
5) Click on the menu on Web Content displayed on the top, assert that, when you open the "Configuration" or "Permissions" modal, the "X" on top-right to close the window is rendered
6) Close the modal and remove one of the two web content display placed on the page
7) Repeat step 5):
Expected: The top-right "X" to be rendered
Actual behavior: The "X" is not rendered (although clicking on the area where it's supposed to be will still help to close the modal)

Reproduced on 7.2.x @ f99d144f5ebc6619d7a2cdbe6fc8233b4d1720ad49fa53f393beaf0cc901edac
Not reproduced on master @ c92be53d36db729af60d9fef59a0926ca984c83fe11346a53e5844771cb008ab

It's not reproducible on master because of the changes we did not backport in LPS-121719