Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Removing xlink:href attribute node from <use> element throws error

See original GitHub issue

Removing xlink:href attribute with removeAttributeNode from a <use> element throws an error with Hammerhead (“Uncaught DOMException: Failed to execute ‘removeAttributeNode’ on ‘Element’: The node provided is owned by another element.” in Chrome and “NotFoundError: Node was not found” in Firefox) but works fine without proxy.

Here’s a simple example:

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>

    <svg style="display: none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <g id="icon">
          <rect x="0" y="0" width="100" height="100"></rect>
        </g>
      </defs>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="#icon"></use>
    </svg>

    <script>
      var use = document.querySelector('use');
      use.removeAttributeNode(use.attributes[0]);
    </script>

  </body>
</html>

You can check it here: https://m4w4q7.github.io/remove-attribute-node-bug-example (an empty page without proxy and a black rectangle with console error when using proxy)

It also works if we use href instead of xlink:href, but Safari does not support it yet, so we can’t change that.

This method of removing the attribute is used in recent versions of hyperHTML, and currently we can’t use TestCafe with it.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
LavrovArtemcommented, Jan 18, 2019

Thank you for the detailed description. I’ve reproduced the problem. Our team will research it and find a suitable solution.

0reactions
miherlosevcommented, Feb 22, 2022
Read more comments on GitHub >

github_iconTop Results From Across the Web

Compilation error occurs for "use" tag w/ xlink:href attribute
Using <use xlink:href="#icon-1"></use> (inside an svg tag) in a jsx render function will cause a an error. This is likely an error in...
Read more >
How can I get the value of an attribute called xlink:href ...
Use the DOM and one of the *NS functions, like getAttributeNS: $doc = new DOMDocument(); $doc->loadXML($your_xml_string); $resource_refs ...
Read more >
xlink:href - SVG: Scalable Vector Graphics - MDN Web Docs
The xlink:href attribute defines a reference to a resource as a reference IRI. ... of that link depends on the context of each...
Read more >
Changing xlink:href attribute on <use> is flaky with cache- ...
The xlink:href attribute of the <use> element should be changed to ... I've created a simpler testcase that exhibits this bug and doesn't...
Read more >
Document Structure — SVG 2
A group of elements, as well as individual objects, can be given a name using the 'id' attribute. Named groups are needed for...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

EventTarget.prototype.addEventListener is not overridden

Next page

All event handlers are cleaned after the document.open function call