fix: ignore stylesheets fetching when is a inline style

[EduSantosBrito]

Closes: #4137

This fixes the issue when there's a inline style tag inside the shadowRoot. Since the inline style doesn't have a href, there's no need to fetch it. This is usual on Lit components.

[CLAassistant]

All committers have signed the CLA.

[straker]

Thanks for the pull request. I would think that the filter method filerStyleAndLinkAttributesInDocumentFragment would catch the inline style tag and filter it out of the loop, thus never getting into this problem. A simple example shows that this is what happens. Do you know why in your case the filter is letting the inline style tag through?

<div id="shadow"></div>
<script>
    const root = shadow.attachShadow({ mode: 'open' });
    root.innerHTML = `
      <!-- this is filtered out of the getStylesheetsFromDocumentFragment loop -->
      <style>
      a { color: red }
      </style>
      <a href="#">hello world</a>
  `;
</script>

[WilcoFiers]

@EduSantosBrito Quick ping, have you had a chance to look at Steve's comment?

[EduSantosBrito]

Hey! I have time this week to look at it. I was on holiday last week hahaha

[EduSantosBrito]

Ok, after debugging for some hours I found that document.implementation.createHTMLDocument breaks HTMLStyleElement.sheet. There's some issues opened related to that jsdom/jsdom#3179

This makes sense why the browser using selenium-webdriver was working and the test using jsdom wasn't.

Quick ping @WilcoFiers @straker

[straker]

That makes sense. Thanks for the looking into that for us.

[straker]

Just updating the comment to reflect the investigations on when and why this is needed.

[straker]

Approved for security.