Problems with shadow-dom

Developers
1

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?

2

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.

3

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

4

Yes. Putting it somewhere on GitHub would be awesome.

5

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 =)

6

Hi, I am new at the forum. Got to this thread cause I have the same problem in my project. Did you find a solution for this that you could share with me please ?

7

Please do not necrobump old topics. Instead link to this thread from new topic.

From what I see the issue has been fixed so we’d need clear reproduce from your end, in a new topic.

1 Like
8