fix: copy styles from adoptedStyleSheets for chart exporting (#9143)

Author: web-padawan

packages/charts/src/vaadin-chart-mixin.js

@@ -1207,10 +1207,18 @@ export const ChartMixin = (superClass) =>
               if (!self.tempBodyStyle) {
                 let effectiveCss = '';
 
+                // PolymerElement uses `<style>` tags for adding styles
                 [...self.shadowRoot.querySelectorAll('style')].forEach((style) => {
                   effectiveCss += style.textContent;
                 });
 
+                // LitElement uses `adoptedStyleSheets` for adding styles
+                if (self.shadowRoot.adoptedStyleSheets) {
+                  self.shadowRoot.adoptedStyleSheets.forEach((sheet) => {
+                    effectiveCss += [...sheet.cssRules].map((rule) => rule.cssText).join('\n');
+                  });
+                }
+
                 // Strip off host selectors that target individual instances
                 effectiveCss = effectiveCss.replace(/:host\(.+?\)/gu, (match) => {
                   const selector = match.substr(6, match.length - 7);

packages/charts/test/exporting.test.js

@@ -34,15 +34,17 @@ describe('vaadin-chart exporting', () => {
 
   it('should temporarily copy shadow styles to the body before export', async () => {
     let styleCopiedToBody = false;
+    let styleContent;
 
     // Track style movement into the document body
     const observer = new MutationObserver((mutations) => {
-      styleCopiedToBody ||= mutations.some(
-        (mutation) =>
-          Array.from(mutation.addedNodes)
-            .map((node) => node.tagName.toLowerCase())
-            .indexOf('style') >= 0,
-      );
+      mutations.forEach((mutation) => {
+        const styleTag = [...mutation.addedNodes].find((node) => node instanceof HTMLStyleElement);
+        if (styleTag) {
+          styleCopiedToBody = true;
+          styleContent = styleTag.textContent;
+        }
+      });
     });
 
     observer.observe(document.body, { childList: true });
@@ -57,6 +59,7 @@ describe('vaadin-chart exporting', () => {
     expect(fireEventSpy.firstCall.args[1]).to.be.equal('beforeExport');
     await nextRender(chart);
     expect(styleCopiedToBody).to.be.true;
+    expect(styleContent).to.include('.highcharts-color-0');
   });
 
   it('should remove shadow styles from body after export', async () => {