fix(runtime): fix NotFoundError in addStyle function with referenceNode parent check

[hbeyan]

What is the current behavior?

addStyle function causes NotFoundError in for some components in our micro front end app.

GitHub Issue Number: 6106

What is the new behavior?

referenceNode's parentNode is checked to prevent insertBefore throwing NotFoundError method.
If the referenceNode is not a direct child of the element receiving the styleNode as the child, referenceNode is not used.

Documentation

Does this introduce a breaking change?

• Yes
• No

Testing

Other information

[christian-bromann]

@hbeyan thanks for raising the issue. Mind adding a WebdriverIO test for this to ensure we don't regress on this?

[hbeyan]

@hbeyan thanks for raising the issue. Mind adding a WebdriverIO test for this to ensure we don't regress on this?

Unfortunately I can only reproduce the issue in micro front-end app, I wasn't able to reproduce it with WebdriverIO tests

[christian-bromann]

, I wasn't able to reproduce it with WebdriverIO tests

Can you reproduce it on a Stencil Starter app? npm init stencil component exampleProject

[johnjenkins]

I guess it's quite a logical check to do either way (that the parent node include the reference node)?

I don't really understand how it can happen ... it's looking for <link /> or <style /> elements in the head ... and nothing in the head can be nested... so it doesn't really make sense, but I guess there's no harm having an extra check

[hbeyan]

, I wasn't able to reproduce it with WebdriverIO tests

Can you reproduce it on a Stencil Starter app? npm init stencil component exampleProject

reproduction project is linked in the issue #6106

[christian-bromann]

👍