Exception thrown when canvas is inside a tag

[karaxuna]

Expected Behavior

When target element for Chart is inside anchor tag, chart should render normally.

Current Behavior

Currently this method fails, because parent anchor tag has property host which is localhost:3000 in my case, so this method returns localhost:3000 instead of parent element.

helpers._getParentNode = function(domNode) { var parent = domNode.parentNode; if (parent && parent.host) { parent = parent.host; } return parent; };

Context

Environment

• Chart.js version: 2.7.3
• Browser name and version: Chrome Version 70.0.3538.77 (Official Build) (64-bit)

[simonbrunel]

@karaxuna can you please share a jsfiddle that reproduces your issue?

[karaxuna]

@simonbrunel https://jsfiddle.net/o5rybgdj/

[simonbrunel]

This issue comes from #5585 which tests element.host to detect if the parent node is a shadow root but <a> also exposes an host property. I should have reviewed this PR better because checking element.host is definitely not a good approach since it can match more than a shadow root.

@reda-alaoui any idea how to fix that issue?

@karaxuna as a workaround, you can wrap your canvas under a <div> element (fiddle).

[karaxuna]

@simonbrunel maybe you could use this method to check if node is shadow root:
https://stackoverflow.com/a/27478691/1265753

[simonbrunel]

Looks good indeed, would you be able to submit a PR which replaces if (parent && parent.host) { by if (parent && parent.toString() === "[object ShadowRoot]") and see if unit tests still pass?

[karaxuna]

@simonbrunel ok

[karaxuna]

@simonbrunel modified it a little bit.

[reda-alaoui]

@simonbrunel sorry for that :/
@karaxuna fix seems also good to me.

[simonbrunel]

@reda-alaoui no worries :) did you try the fix, can you confirm it works in your case (I just approved the PR)?

[karaxuna]

@simonbrunel It works: https://jsfiddle.net/p9gqy4vf/