replace global styles with shadow root styles

Author: sissbruecker

src/component/vcf-breadcrumb.ts

@@ -133,6 +133,15 @@ class VcfBreadcrumb extends ElementMixin(PolylitMixin(LitElement)) {
         :host(.mobile-back.is-before-current) {
           display: inline-block;
         }
+
+        ::slotted(a.breadcrumb-anchor.add-mobile-back-icon)::before {
+          display: inline;
+          font-family: var(--vcf-breadcrumb-separator-font-family);
+          content: var(--vcf-breadcrumb-mobile-back-symbol);
+          font-size: var(--vcf-breadcrumb-separator-size);
+          margin: var(--vcf-breadcrumb-separator-margin);
+          color: inherit;
+        }
     `];
   }
 

src/component/vcf-breadcrumbs.ts

@@ -342,27 +342,6 @@ export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(PolylitMixin(LitEle
         this._mobile = matches;
       }),
     );
-
-    // Inject a scoped <style> element to define the mobile back icon behavior
-    const style = document.createElement('style');
-    style.textContent = `
-      /* 
-       * This rule targets an <a> element with the 'breadcrumb-anchor' and
-       * 'add-mobile-back-icon' classes that is a direct child of <vcf-breadcrumb>.
-       *
-       * Although technically global, it's scoped through the component selector
-       * and only applies to breadcrumb anchors styled for mobile mode.
-       */
-      vcf-breadcrumb > a.breadcrumb-anchor.add-mobile-back-icon::before {
-        display: inline;
-        font-family: var(--vcf-breadcrumb-separator-font-family);
-        content: var(--vcf-breadcrumb-mobile-back-symbol);
-        font-size: var(--vcf-breadcrumb-separator-size);
-        margin: var(--vcf-breadcrumb-separator-margin);
-        color: inherit;
-      }
-    `;
-    this.appendChild(style);
   }
 
 }