Problems with shadow-dom

Hello everybody!

I’m trying to use bpmn.io inside a project built with web components (using Polymer) and I have some problems with styles (that I 've already expected) and javascript, specially with the funcions domClosest and matches. The problem was in the next fragment of domClosest:

while (parent && parent !== document) {
  if (matches(parent, selector)) return parent;
  parent = parent.parentNode
}

Eventually, when the code iterates in the parent tree, it will find the shadow-root (basically a #document-fragment) that will cause an error when pass to the matches function as argument.

I have solved the problem with the following code:

while (parent && parent !== document && parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
  if (matches(parent, selector)) return parent;
  parent = parent.parentNode
}

As you can see I stop the while loop when the parent variable is the document or a #document-fragment. With this change it appears to work perfectly.

I don’t know if it is the correct solution and I don’t like editting the codebase of the project. Any advice about this problem?

First of all, thanks for reporting this issue.

Could you setup and share a simple example project using polymer + bpmn-js? That allows us to dig into this issue and fix it, eventually.

Yes, of course. I suppose that you want the example project without fix the issue, am I correct?

Yes. Putting it somewhere on GitHub would be awesome.

Hi! I have uploaded a sample project to GitHub as you requested. Here is the link:

In order to test the example:

  • Clone the repository.
  • Run bower install
  • Run a web server of your choice. A simple python -m http.server will do.

I hope it can help you =)